javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > JS前端文件读取FileReader

JS前端文件读取FileReader操作方法总结

作者：yqdidy

FileReader 包含了一套完整的事件模型,用于捕获读取文件时的状态,下面这篇文章主要给大家介绍了关于JS前端文件读取FileReader操作方法的相关资料,需要的朋友可以参考下

FileReader

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

构造函数：

let reader = new FileReader(); // 没有参数

主要方法

readAsArrayBuffer(blob)

将数据读取为二进制格式的 ArrayBuffer。当读取操作完成时，readyState 变成 DONE（已完成），并触发 loadend 事件，同时 result 属性中将包含一个 ArrayBuffer 对象以表示所读取文件的数据。

reader.readAsArrayBuffer(blob)

readAsText(blob, [encoding])

将数据读取为给定编码（默认为 utf-8 编码）的文本字符串。

instanceOfFileReader.readAsText(blob[, encoding]);

readAsDataURL(blob)

读取二进制数据，并将其编码为 base64 的 data url。

reader.readAsDataURL(blob);

读取方法都是异步的，也就是说只有当执行完成后才能够查看到结果，如果直接查看是无结果的，并返回 undefined。必须要挂载 实例下的 onload 或 onloadend 的方法才能处理转化后的结果

FileReader的三个属性：

读取文件的示例：

参考 https://www.jb51.net/javascript/3249569x8.htm

<input type="file" onchange="readFile(this)">

<script>
function readFile(input) {
  let file = input.files[0];

  let fileReader= new FileReader();

  fileReader.readAsText(file);
  // 或者 fileReader.readAsArrayBuffer(file)
  
  /**
   * 该方法在读取时调用
   */
  fileReader.onloadstart = () => {
      console.log("开始读取")
      console.log(fileReader.readyState)//调用函数,但还没有结束,返回1
  }
  /**
   * 该方法在读取成功时调用
   */
  fileReader.onload = () => {
      console.log("读取成功")
      console.log(fileReader.result)
      console.log(fileReader.readyState)//调用完成,返回2
  }
  /**
   * 该方法在读取结束时调用
   */
  fileReader.onloadend = () => {
      console.log("读取结束")
  }
  /**
   * 读取过程中触发
   */
  fileReader.onprogress = (e) => {
      console.log("读取中")
      //获取已经加载的数据量
      console.log("loaded==>" + e.loaded)
  }
  /**
   * 该方法在调用abort函数时触发
   */
  fileReader.onabort = () => {
      console.log("操作终止")
  }
  //当读取出现失败时触发
  fileReader.onerror = () => {
      console.log("出现错误")
      console.log(fileReader.error)
  }
}
</script>

read 方法的选择tips：

示例：根据用户传入的图片文件,来生成一个对应的临时url,并将临时url作为src传给img标签

<input type="file" id="file">
<img  id="img">

let file = document.getElementById("file")
let img= document.getElementById("img")
file.addEventListener("change", (e) => {
    let fileList=e.target.files
    //先获取一份文件
    //这里获取的才是File对象
    let file = fileList[0]
    //因为file也是Blob对象,所以直接传入即可
    img.src=URL.createObjectURL(file)
})

主要事件

读取过程中，有以下事件：

读取完成后，可以通过以下方式访问读取结果：

检测浏览器对 FileReader 的支持：

if(window.FileReader) {
  var fr = new FileReader();
  // add your code here
}else {
  alert("Not supported by your browser!");
}

React + antd Upload 组件示例

场景： 表单文件上传，读取后以base64格式与表单一起传给后端。

<Upload
  maxCount={1}
  accept=".jpg,.jpeg,.png"
  beforeUpload={(file) => {
    console.log('文件类型', file.type, file);
    // 限制文件类型
    const allowTypes = [
      'image/png',
      'image/jpeg',
      'image/jpg',
    ];
    const isAllowType = allowTypes.includes(file.type);
		// 校验文件大小和类型
    if (!isAllowType || file.size / 1024 / 1024 > 4) {
      message.error('文件格式大小错误');
      return Upload.LIST_IGNORE;
    }
    const reader = new FileReader();
    //将上传的文件读取成base64
    reader.readAsDataURL(file);
    reader.onloadend = function () {
    	console.log('文件Base64内容',reader.result, file);
    };
    // 阻止上传，为了最后和表单一起提交
    return false;
  }}
>
  <Button icon={<UploadOutlined />} type="primary">
    文件上传
  </Button>
</Upload>

总结 

到此这篇关于JS前端文件读取FileReader操作方法总结的文章就介绍到这了,更多相关JS前端文件读取FileReader内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文