当前位置: 代码迷 >> 综合 >> FileReader 上传并读取文件,实现前端选择文件后读取文件内容
  详细解决方案

FileReader 上传并读取文件,实现前端选择文件后读取文件内容

热度:58   发布时间:2023-12-22 05:39:30.0

HTML5 的 FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据。

FileReader 事件

  • FileReader.onabort
    处理abort事件。该事件在读取操作被中断时触发。

  • FileReader.onerror
    处理error事件。该事件在读取操作发生错误时触发。

  • FileReader.onload
    处理load事件。该事件在读取操作完成时触发。

  • FileReader.onloadstart
    处理loadstart事件。该事件在读取操作开始时触发。

  • FileReader.onloadend
    处理loadend事件。该事件在读取操作结束时(要么成功,要么失败)触发。

  • FileReader.onprogress
    处理progress事件。该事件在读取Blob时触发。

<div style="border: 1px solid red;"><input type="file" id="file"  onchange="uploadfile();" /><div id="result"> </div>
</div>
    // 上传文件function uploadfile() {let reads = new FileReader();file = document.getElementById('file').files[0];reads.readAsText(file, 'utf-8');console.log(reads);reads.onload = function (e) {console.log(e.target.result)};reads.onloadstart = function(e) {console.log('onloadstart ---> ', e)}reads.onloadend = function(e) {console.log('onloadend ---> ', e)}reads.onprogress = function(e) {console.log('onprogress ---> ', e)}}