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