1.检测浏览器对FileReader兼容性的方法：
if(window.FileReader) {
var fr = new FileReader();
// add your code here
}
else {
alert("Not supported by your browser!");
}
方法二：检测FileReader类型
if(typeof FileReader==='undefined'){
alert('您的浏览器不支持图片上传，请升级您的浏览器');
return false;
}
2.调用fileReader对象的方法
FileReader实例拥有四个方法，其中三个是用来读取文件，另一个是用来中断读取的。需要注意的是，无论读取成功或是失败，方法并不会返回读取结果，这一结果(储存在result属性中)要用FileReader处理事件去获取；
| 方法名 | 参数 | 描述 |
|---|---|---|
| abort | none | 中断读取 |
| readAsBinaryString | file | 将文件转化为二进制码 |
| readAsDataURL | file | 读取文件内容，结果用data:url的字符串形式表示 |
| readAsText | file,[encoding] | 将文件读取为文本 |
readAsText：该方法有两个参数，其中第二个参数是文本的编码方式，默认值为 UTF-8。这个方法非常容易理解，将文件以文本方式读取，读取的结果即是这个文本文件中的内容。
readAsText(file,encoding)可按指定编码方式读取文件，但读取文件的单位是字符，故对于文本文件，只要按规定的编码方式读取即可；而对于媒体文件（图片、音频、视频），其内部组成并不是按字符排列，故采用readAsText读取，会产生乱码，因此不是最理想的读取文件的方式。
readAsBinaryString：该方法将文件读取为二进制字符串，通常我们将它传送到后端，后端可以通过这段字符串存储文件。
readAsDataURL：这是例子程序中用到的方法，该方法将文件读取为一段以 data: 开头的字符串，这段字符串的实质就是 Data URL，Data URL是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件。
控制台为当前所传文件的base64编码表示。由于媒体文件的src属性，可以通过采用网络地址或base64的方式显示，因此我们可以利用readAsDataURL实现对图片的预览。
3.处理事件
FileReader 包含了一整套完成的事件模型，用于捕获读取文件时的状态,下面这个表格归纳了这些事件。
| 事件 | 描述 |
|---|---|
| onabort | 中断时触发 |
| onerror | 出错时触发 |
| onload | 文件读取成功完成时触发 |
| onloadend | 读取完成时触发，无论读取成功或失败 |
| onloadstart | 读取开始时触发 |
| onprogress | 读取中 |
| result | 返回文件的内容。只有在读取操作完成后，此属性才有效，返回的数据的格式取决于是使用哪种读取方法来执行读取操作的。 |
| readyState | 提供 FileReader 读取操作时的当前状态。 |
实例
image.png
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="file" id="imgFile"/>
<img id="viewImg" src=""/>
</body>
<script type="text/javascript">
//绑定change事件
document.getElementById("imgFile").addEventListener("change",function(){
//获取选择文件的信息
let file=this.files[0];
//判断浏览器是否支持FileReader
if(window.FileReader){
//创建FileReader对象
let reader=new FileReader();
// 使用URL格式的字符串以表示所读取文件的内容。
reader.readAsDataURL(file);
//读取开始时触发
reader.onloadstart=function(){
console.log("开始读取...");
}
//读取中
reader.onprogress=function(){
console.log("读取中...");
}
//读取完成时触发，无论读取成功或失败
reader.onloadend=function(){
console.log("读取完成...");
}
//文件读取成功完成时触发
reader.onload=function(){
console.log("读取成功");
document.getElementById("viewImg").src=this.result;
}
//文件读取失败时触发
reader.onerror=function(){
console.log("读取失败");
}
}
})
</script>
</html>
image.png
网友评论