详解Js中文件读取机制

Posted 2020-08-02 Tech 侠

   

   前言，文件读取是提高应用体验度的必须接口，因为文件操作在编程应用场景中需求很频繁。

      Js处理文件读取，由于处于安全方面的考虑，在2000年以前，都是以“<input type="file">”字段来实现文件上传，这样有很多的局限性，比如无法在本地上传时看到自己上传的文件（如图片），也无法读取到文件内容，审查文件流大小。

   html5中，主流浏览器引擎都支持新的FILE API，为“<input type="file">”提供一个files数组，包含每个文件，为每个文件对象提供4个属性:name,size,type,lastModifiedDate,分别表示文件的名称，文件流大小，MIME类型和上次被修改的时间。在实际应用中，有时为了控制上传文件的大小，通过size就可以在前端提示用户选择合适范围内大小的文件。

   HTML5提供了一个原型FileReader,通过该原型的实例可以得到4个主要的方法：

     1> readAsText(file,encoding)，以纯文本形式读取文件，将读取的文本保存到该实例对象的result属性中。第二个参数指定编码类型，是可选的;
     2> readeAsDataURL(file),读取文件并将文件以数据URI的形式保存在result属性中;

     3>readAsBinaryString(file)，读取文件并将一个字符串保存在result属性中，字符串中的每个字符表示一字节。

     4>readAsArrayBuffer(file):读取文件并将一个包含文件内容的ArrayBuffer保存在result属性中。

    其中，通过readAsDataUrl(file)可以读取到文件地址，如果是图片文件，可以结合src属性显示图片文件,

    具体实例可以参考实例:https://github.com/Johnharvy/html-dom-tools/.

    由于文件读取加载的过程是异步的，即文件加载读取是需要排队等待时间的，所以FileReader也提供了几个事件，用于在文件加载的各个阶段触发，分别为process,error和load,分别表示是否又读取了新数据，是否发生了错误以及是否已经读完了整个文件。

   每次过50ms，就会触发一次process事件，每次process事件都可以通过FileReader的result属性读取到文件的相关内容。

   如果由于某些原因无法读取文件，就会触发error事件并默认带一个参数code，有1，2，3，4，5个状态值，分别表示未找到文件，安全性错误，读取中断，文件不可读，编码错误。

   文件加载成功后，会触发load事件，如果已发生error事件，就不再触发load事件。