HTML5 + JavaScript 读取本地文件

What is FileReader ?

记录一下HTML5+JS读取本地文件的操作
用到的是FileReader类

FileReader对象:
采用事件机制，以下是一些可以注册的事件：
onabort：中断时触发，可以停止读取文件
onerror：出错时触发
onload：文件成功读取完毕时触发
onloadend：文件读取完毕时触发，无论是否失败
onloadstart：文件开始读取时触发
onprogress：当文件读取时，周期性地触发
 
他有4个读取函数：
readAsArrayBuffer(file)：将文件读取为ArrayBuffer。
readAsBinaryString(file)：将文件读取为二进制字符串
readAsDataURL(file)：将文件读取为Data URL
readAsText(file, [encoding])：将文件读取为文本，encoding缺省值为’UTF-8′

Demo : choose txt file or image file

Code

<input id="file" type="file" multiple="" onchange="read_files(this.files)">
<div id="inputDemo" style="min-height:70px;background-color:#eee;padding:5px;"></div>
 
<script>
function read_files(fileArray){
	for(var i in fileArray){
		var file = fileArray[i]; //这个file对象有以下属性可供读取name、size、lastModifiedDate和type等。
		var reader = new FileReader();
		if(/text\/\w+/.test(file.type)) { //判断文本文件
			reader.onload = function() { //成功读取完毕后触发onload事件
				document.getElementById('inputDemo').innerHTML=this.result;
			}
			reader.readAsText(file);//readAsText函数用于将文件读取为文本
		}else if(/image\/\w+/.test(file.type)) { //判断图片文件
			reader.onload = function() {
				document.getElementById('inputDemo').innerHTML='<img src='+this.result+'>';
			}
			reader.readAsDataURL(file);//readAsDataUrl函数用于将文件读取为Data url
		}
	}
}
</script>