HTML5 FileReader对象
FileReader的接口方法
FileReader实例拥有四个方法，其中三个是用来读取文件，另一个是用来中断读取的。需要注意的是，无论读取成功或是失败，方法并不会返回读取结果，这一结果(储存在result属性中)要用FileReader处理事件去获取；
方法名 参数 描述
abort none 中断读取
readAsBinaryString file 将文件转化为二进制码
readAsDataURL file 将文件读取为DataURL
readAsText file,[encoding] 将文件读取为文本
readAsText：
该方法有两个参数，其中第二个参数是文本的编码方式，默认值为 UTF-8。这个方法非常容易理解，将文件以文本方式读取，读取的结果即是这个文本文件中的内容。
readAsBinaryString：
该方法将文件读取为二进制字符串，通常我们将它传送到后端，后端可以通过这段字符串存储文件。
readAsDataURL：
这是例子程序中用到的方法，该方法将文件读取为一段以 data: 开头的字符串，这段字符串的实质就是 Data URL，Data URL是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件。
3.处理事件
FileReader 包含了一整套完成的事件模型，用于捕获读取文件时的状态
事件 描述
onabort 中断时触发
onerror 出错时触发
onload 文件读取成功完成时触发
onloadend 读取完成时触发，无论读取成功或失败
onloadstart 读取开始时触发
onprogress 读取中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
</head>
<body>
<input type="file" name="test" id="fileInput" id="input">
<img src="" alt="" height="200" width="300" id="img">
<button id="show-text">读取文本</button>
<button id="show-img">预览图片</button>
<button id="show-bit-btn">读取二进制</button>
<button id="showDataURL">将文件读取为DataURL</button>
<div id="show-bit"></div>
<script>
var fileInput = document.getElementById("fileInput");
var img = document.getElementById('img');
var showText = document.getElementById('show-text');
var showBtn = document.getElementById('show-img');
var showBitBtn = document.getElementById('show-bit-btn');
var showDataURL=document.getElementById('showDataURL');
var showBitDiv = document.getElementById('show-bit');
var file;
var reader= new FileReader();
//判断浏览器是否支持FileRader接口
if (typeof FileReader == 'undefined') {
alert('你的浏览器不支持FileReader')
fileInput.setAttribute('disabled', 'disabled')
}
//监听chage事件
fileInput.addEventListener('change', function () {
file = this.files[0];
}, false)
//判断是否含有file
function fileUn(){
if(typeof file=="undefined"){
alert('请先选择文本文件');
return;
}
}
//展示读取内容
function showResult(){
showBitDiv.innerHTML = reader.result;
}
//将文件读取成二进制文件
showText.addEventListener('click',function(){
fileUn();
reader.readAsText(file,'gb2312');
// 读取到的二进制文件展示出来
reader.onload=function(){
showResult();
}
})
//读取二进制文件 读取text文件和二进制文件爱你相同，只需要提换方法即可
showBitBtn.addEventListener('click', function () {
fileUn();
// reader.readAsBinaryString
reader.readAsBinaryString(file)
reader.addEventListener('loadstart',function (){
console.log('开始读取', this)
})
reader.addEventListener('progress',function (){
console.log('读取中', this)
})
reader.addEventListener('load', function () {
// 读取到的二进制文件展示出来
showBitDiv.innerHTML = reader.result
})
reader.addEventListener('loadend',function (){
console.log('读取结束', this)
})
})
//将文件读取为DataURL
showDataURL.addEventListener('click',function(){
fileUn();
reader.readAsDataURL(file)
reader.addEventListener('load',function(){
//展示DataURL
showBitDiv.innerHTML = reader.result;
})
})
//预览图片
showBtn.addEventListener('click', function () {
fileUn();
reader.addEventListener('load', function () {
img.src = reader.result;
}, false)
reader.readAsDataURL(file);
})
</script>
</body>
</html>
