原文:https://blog.csdn.net/mapbar_front/article/details/78632928
FileReader是前端进行文件处理的一个重要的Api,特别是在对图片的处理上,如果你想知道图片的处理原理,你就永远不可能绕过它。
文件处理是一系列的流程,每一步我们都需要知道,自己能做什么,自己做了什么。
第一步,获取文件
前端中,获取文件必须使用input标签。
<input id='file' type='file' />
处理这个文件,必须要用代码的方式,体现出来,让你能用代码操作它。这里主要是使用input标签的onchange事件。
var file = document.getELementById('file'); file.onchange = function(e){ var files = e.target.files; //这个files就是获取的file文件的一个数组。之后你可以使用任何方式来操作它。 }
关于file的小知识:前端在读取到files数组之后,可以对得到的文件一些属性进行读取。这些属性分别是:name、size、type、lastModifiedDate。
一个特别重要的点就是判断图片的大小,根据文件的大小进行后续操作。
var file = files[0];//比如这个file是图片 if(file.size > 5000){ //处理压缩操作 }
第二步,读取文件
1、读取文件,主要使用的是FileReader类。它提供了几个方法。
readAsText(file, encoding);
以纯文本形式读取文件,读取到的文本保存在result属性中。第二个参数代表编码格式。
readAsDataUrl(file);
读取文件并且将文件以数据URI的形式保存在result属性中。
readAsBinaryString(file);
读取文件并且把文件以字符串保存在result属性中。
readAsArrayBuffer(file);
读取文件并且将一个包含文件内容的ArrayBuffer保存咋result属性中。
2、文件读取的过程是异步操作,在这个过程中提供了三个事件。progress、error、load事件。
progress-每隔50ms左右,会触发一次progress事件。
error-在无法读取到文件信息的条件下触发。
load-在成功加载后就会触发。
第三步,相关源码
html:
分别用input标签获取文件,span获取文件的进度条,div来查看获取的数据源。
<input id="file" type="file" οnchange="fileChange" /> 进度:<span id="progress"></span> <div id="box"> </div>
js代码:
//获取页面元素对象 var file = document.getElementById('file'); var output = document.getElementById('box'); var progress = document.getElementById('progress'); //onchange事件 file.onchange = function (e) { console.log(e); var files = e.target.files; var file0 = files[0]; console.log(file0.size,file0.name,file0.type); //fileReader对象 var fileReader = new FileReader(); var type = 'default'; //判断文件类型 if(/image/.test(file0.type)){ fileReader.readAsDataURL(file0); type = 'image'; } else { fileReader.readAsText(file0,'utf-8'); type = 'text'; } //文件加载出错 fileReader.onerror = function () { output.innerHTML = 'Could not read file, error code is ' + fileReader.error.code; }; //加载成功后 fileReader.onload = function () { console.log('onload') var html = ''; switch (type) { case 'image': html = '<img src="' + fileReader.result +'">'; break; case 'text': html = fileReader.result; break; } output.innerHTML = html; }; //进度条进度 fileReader.onprogress = function (event) { if(event.lengthComputable) { progress.innerHTML = event.loaded + '/' + event.total; } } }