理解 Web 中的 FileReader 对象

理解

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

其中File对象可以是来自用户在一个​​<input>​​​元素上选择文件后返回的​​FileList​​​对象,也可以来自拖放操作生成的 ​​DataTransfer​​​对象,还可以是来自在一个​​HTMLCanvasElement​​上执行mozGetAsFile()方法后返回结果。

重要提示： FileReader仅用于以安全的方式从用户（远程）系统读取文件内容 它不能用于从文件系统中按路径名简单地读取文件。 要在JavaScript中按路径名读取文件，应使用标准Ajax解决方案进行服务器端文件读取，如果读取跨域，则使用CORS权限。

示例代码

将input上传的图片内容直接使用 FileReader 对象存储，并且生成图片使用 FileReader 对象结果

const input = document.querySelector('input[type=file]')

  input.addEventListener('change', ()=>{
    console.log( input.files )
    const reader = new FileReader()
    reader.readAsDataURL(input.files[0]) 
    reader.onload = ()=>{
      const img = new Image()
      img.src = reader.result
      document.body.appendChild(img)  
    }
  }, false);