FileReader读取本地文件

昨天接到一个需求，一个营销人员做线下活动，想弄一个人脸识别认证的功能。刚开始听，wtf，H5能人脸识别？？？后来老大说找第三方做，我们只负责传数据就行，松了一口气，不然又要加班了。所谓的数据就是用户的照片或视频。这就涉及到本地文件的读取了，或者调用摄像头。突然想到了HTML5的FileReader这个api，试了试，还行，满足需求。不熟悉这个api的，==>>传送门

好了，废话不多少，来个开胃菜

<input type='file' id='file' accept='image/*,video/*' capture='' />

accept这个属性表示可以接受的文件类型，多个类型用 ,隔开。
接下来就是重点了，有了HTML，js当然不能少。

document.getElementById('file').onchange = fucntion(e){
   var file = e.target.files[0],
         reader = new FileReader(),
         result = '';
   if(file){
       reader.readAsDataURL(file)
   }
   reader.onabort = function(){
            //读取中断
   };
   reader.onerror = function(){
             //读取发生错误
   };
   reader.onload = function(){ 
         if(readyState == 2){
             result = reader.result
         }     
   }
   
}

这就是简单的实现过程。通过 file,也可以得到文件的 size, name等属性，有兴趣的可以log以下。
上面的 e.target.files[0]也可以写成 this.files[0],习惯而已，萝卜青菜～
读取本地文件，可能是image文件，可能是video文件，也有可能是txt文件,audio文件或者doc 文件，所以根据 file.type就可以判断出读取的文件类型，写一个栗子：

if (/image\/\w+/.test(file.type)) {
      alert('这是图片文件')
}

当然，你也可以根据 file.type判断出文件的格式。小栗子：

var fmt = file.type.split('/')[1];//fmt即为文件格式

FileReader是HTML5 新的API，所以，某些浏览器或许不支持，所以加一个兼容性。

if(typeof FileReader != 'undefined'){
    //your codes
}else{
    alert('你的浏览器太完蛋')
}

MDN的FileReader的文档明确写出了FileReader对象会异步读取本地文件，所以为了不阻塞当前线程，采用了事件模型，相关的事件还有
FileReader.onabort
处理 abort事件。该事件在读取操作被中断时触发
FileReader.onerror
处理 error事件。该事件在读取操作发生错误时触发
FileReader.onload
处理 load事件。该事件在读取操作完成时触发
FileReader.onloadstart
处理 loadstart事件。该事件在读取操作开始时触发
FileReader.onloadend
处理 loadend事件。该事件在读取操作结束时（要么成功，要么失败）触发

开发过程中，这五种读取事件应该用到最多。

还有一点，由于是异步读取，类似ajax请求返回的statecode,所以上面 reader.onload函数中 readyState == 2代表读取成功返回的statecode,跟ajax中onreadystatechange方法中的 readyState和 status意思差不多。相类似的statecode还有：
readyState == 0代表empty, 还没有加载任何数据.
readyState == 1代表loading , 数据正在被加载.
readyState == 2代表done, 已经完成所有的读取请求
所以根据以上事件模型和状态码，可以写出一套完整的读取文件状态的逻辑。

说到文件读取了，如果是image文件，还要涉及到预览，来一个html
<img src='' alt='' id='img' />
上面 reader.onload中已经得出result的值，这个值是base64以后的图片流。
document.getElementById('img').setAttribute('src',result)即可预览读取的图片。

以上都是个人理解，如有错误，请留言指出，谢谢🙏