详解Js中文件读取机制

时间:2023-03-09 03:05:13
详解Js中文件读取机制

前言,文件读取是提高应用体验度的必须接口,应用场景中需求很频繁。

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事件。