大家好 !! 又见面了， 今天我们来搞一搞 H5的新增API FileReader 真是一个超级超级方便的API呢！！！很多场景都可以使用..........
我们先不赘述MDN文档里的内容， 我们从 1 到 0， 从 一个 小Demo 入手 开始 了解 它；
请开始你的表演：
是不是简单又炫酷， 我们从头开始来看， 界面分三个部分
1 文件input框
2 预览部分
3 进度条
HTML代码：
<div class="file-preview">
<div class="add" style="width: 50px;height: 50px;line-height: 50px;text-align: center;background-color: #eeeeee;position: relative;" >
+
<input type="file" id="fileInput" style="opacity: 0;z-index: 1;position: absolute;top: 0;left: 0;width: 100%;height: 100%;cursor: pointer;">
</div>
<div class="image-box" style="margin-top: 20px;height: 200px;line-height: 0">
<img src="" alt="" style="max-height: 200px;display: none" id="image">
<video src="" controls style="display: none;" height="200"></video>
</div>
<div class="progress" style="background-color: #cccccc;width: 700px;height: 20px;position: relative;text-align: center;line-height: 20px;margin-top: 20px;">
<span id="percent">0%</span>
<div class="loading" style="position: absolute;height: 100%;background-color: blue;top: 0;left: 0;"></div>
</div>
</div>
HTML结构应该很清晰吧， 我们重点讲js部分
First 获取要操作的Dom元素
var img = document.querySelector('#image'); // 获取image
var video = document.querySelector('video'); // 获取video
var input = document.querySelector('#fileInput'); // 获取input
var loading = document.querySelector('.loading'); // 获取进度条
var percent = document.querySelector('#percent'); // 获取百分比
var reader = new FileReader(); // 初始化一个 FileReader
var file = {}; // 文件对象
var fileType = ''; // 文件类型
Second 监听input 上的change事件 ， 获取选择的本地文件
input.addEventListener('change', function(event) {
file = event.target.files[0]; // 获取文件对象
video.style.display = 'none'; // 隐藏video
img.style.display = 'none'; // 隐藏image
percent.innerHTML = '0%'; // 初始化百分比
loading.style.width = '0px'; // 初始化进度条
if (event.target.files.length) {
fileType = file.type.split('/')[0]; // 获取文件类型
reader.readAsDataURL(file); // 开始读取文件
}
});
fileReader 上 readAsDataURL() 方法是把文件 转换成 一个 base64编码的字符串，可以放在图片或者视频的src里， 最常用
readAsText() 把文件 转换成 一个特定编码格式的字符串， 没有指定编码格式默认为utf-8 常用
readAsBinaryString() 把文件 转化成一个二进制数据 了解即可
readAsArrayBuffer() 把文件 转换成一个 ArrayBuffer 数据 了解即可
这些方法转换后的数据都在FileReader.result上 ，还有一个终止读取的方法 abort（）
继续正题.................
Third 文件开始读取后 FileRead 给我们提供了 读取 状态 的 事件 ， 我们绑定这些事件来看看效果：
reader.onabort = function (e) { // 终止读取触发 abort()方法会触发它
console.log('abort')
};
reader.onloadstart = function (e) { // 开始读取触发
console.log('start')
};
reader.onprogress = function (e) { // 读取过程触发 可以获得读取进度
percent.innerHTML = (e.loaded/e.total).toFixed(2) * 100 + '%'; // 进度百分比
loading.style.width = (e.loaded/e.total) * 700 + 'px'; // 进度百分比 乘 总宽度 等于 进度条的宽度
};
reader.onload = function (e) { // 读取结束并且读取成功触发 在这里可以拿到result
console.log('loaded');
loading.style.width = '700px'; // 进度条完成
percent.innerHTML = '100%'; // 百分比完成
if (fileType === 'video') {
video.src = this.result;
video.style.display = 'block' // 显示视频
} else if (fileType === 'image'){
img.src = this.result;
img.style.display = 'block' // 显示图片
}
};
reader.onloadend = function (e) { // 读取结束触发 ， 在load之后
console.log('end')
};
这里要注意一点， load 是读取成功触发， loadend 不管读取成功或者失败都会触发，
所以我们在load 里拿到转化结果。
到此 demo 就做完啦！！！！！！！
同学们学会了吗，
最后提一嘴， 虽然FileReader 很好用 ， 但是 ————————————
———————— base64转码很费时间， 如果文件非常大的话， 很慢。。。。。
还有可能转不出来。。。。。
这种情况 推荐使用 URL.createObjectURL（file）创建一个DOMString, 直接使用这个DOMString 就好啦，
使用完记得 使用 URL.revokeObjectURL() 清掉
本期讲解到此结束， 我们下期再见 。