FileReader对象

找出什么是FileReader对象以及如何使用它

FileReader对象异步读取文件的内容。

它展示了我们可以用来启动阅读过程的4种阅读方法:

  • readAsText()
  • readAsDataURL()
  • readAsArrayBuffer()
  • readAsBinaryString()

abort()停止任何读取操作的方法。

读取文件是异步的,并且该对象公开了一些我们可以挂钩以跟踪操作进度的事件:

  • onload读取成功结束时触发
  • onloadstart开始阅读时触发
  • onprogress正在进行阅读时触发
  • onloadend读取结束时触发,成功还是不成功
  • onerror发生错误时触发
  • onabort读取中止时触发

读取操作完成后,resultFileReader的属性包含文件内容。

error属性包含错误消息(如果发生错误),以及readyState包含操作状态-0如果没有数据加载,1是否正在进行数据加载,以及2如果加载完成。

readAsText()

加载内容斑点在文本字符串中。

在此示例中,我们使用该文本并将其放入#content元素的内部HTML:

//..file is available as a blob

const reader = new FileReader()

reader.onload = event => { const text = reader.result document.getElementById(‘content’).innerHTML = text }

reader.onerror = (e) => { console.error(e) }

reader.readAsText(file)

这是一个使用文本文件上载时读取文本文件内容的示例input元素,并将其内容打印到控制台:

<input type="file" allow="text/*" />
const input = document.querySelector('input')

input.addEventListener(‘change’, e => { const reader = new FileReader()

<span style="color:#a6e22e">reader</span>.<span style="color:#a6e22e">onload</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">event</span> =&gt; {
  <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">text</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">reader</span>.<span style="color:#a6e22e">result</span>
  <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">text</span>)
}

<span style="color:#a6e22e">reader</span>.<span style="color:#a6e22e">onerror</span> <span style="color:#f92672">=</span> (<span style="color:#a6e22e">e</span>) =&gt; {
  <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">error</span>(<span style="color:#a6e22e">e</span>)
}

<span style="color:#a6e22e">reader</span>.<span style="color:#a6e22e">readAsText</span>(<span style="color:#a6e22e">input</span>.<span style="color:#a6e22e">files</span>[<span style="color:#ae81ff">0</span>])

})

readAsDataURL()

将Blob的内容加载到资料网址

//..file is available as a blob

const reader = new FileReader()

reader.onload = event => { const dataURL = event.target.result document.getElementById(‘image’).src = dataURL }

reader.readAsDataURL(file)

readAsArrayBuffer()

将Blob的内容加载到ArrayBuffer

//..file is available as a blob

const reader = new FileReader()

reader.onload = event => { const buffer = reader.result const data = new Int32Array(buffer) //… }

reader.onerror = (e) => { console.error(e) }

reader.readAsArrayBuffer(file)

免费下载我的JavaScript初学者手册


更多浏览器教程: