javascript的FileReader类

javascript
  目录
  1. 1. javascript的FileReader类
    1. 1.1. 2019-07-24内容
    2. 1.2. 2019-10-29追加内容
      1. 1.2.1. readAsArrayBuffer=>ArrayBuffer
      2. 1.2.2. readAsBinaryString =>BinaryString
      3. 1.2.3. readAsDataURL =>DataURL
      4. 1.2.4. 说一个截图上传的小例子

javascript的FileReader类

javascript的FileReader类

2019-07-24内容

现在，我们在前端对文件处理的需求已经慢慢增加了，比如，前端上传图片的回显，还有excel文件的解析等，都需要FileReader这个类来实现，这个类有4个方法:

  • FileReader.readAsBinaryString(Blob|File)
  • FileReader.readAsText(Blob|File, opt_encoding)
  • FileReader.readAsDataURL(Blob|File)
  • FileReader.readAsArrayBuffer(Blob|File)

这里，具体的使用方法不过多介绍，详情点击这里

2019-10-29追加内容

readAsArrayBuffer=>ArrayBuffer

二进制数据的存储器,可通过ArrayBufferView以8位、16位、32位、64位数字为元素对ArrayBuffer内的二进制数据进行展现。可用于生成Blob,然后添加到FormData去上传。

readAsBinaryString =>BinaryString

是二进制数据直接以byte的形式展现的字符串,ArrayBuffer对应的Uint8Array的字符形式的表现

readAsDataURL =>DataURL

包括mimeType和base64编码后的binaryString,可以直接给使用：data:[mimeType];base64,[base64(binaryString)]可借此获取mimeType和binaryStringvar binaryString = atob(dataUrl.split(‘,’)[1]),mimeType = dataUrl.split(‘,’)[0].match(/:(.*?);/)[1];

说一个截图上传的小例子

  • canvas截图并使用toDataURL,获取DataURL
  • 通过binaryString = atob(dataUrl.split(‘,’)[1])获取BinaryString
  • 通过Uint8Array和charCodeAt把binaryString转化为ArrayBuffer
  • ArrayBuffer存入Blob并添加到FormData上传,服务器最终收到BinaryString

注意,formdata在send时必须使用ArrayBuffer,因为BinaryString为字符串,当send发送时会对字符串进行utf8编码导致数据被破坏。
demo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <form name='test'>
    <input type="file" name='file'>
    <input type="submit" value="提交">
  </form>
  <img src="" alt="">
  <script>
    var img = document.querySelector('img'),
        preview;
    document.test.file.addEventListener('change', function() {
      var fr = new FileReader();
      fr.onload = function() {
        preview = this.result;
        img.src = preview;
      };
      fr.readAsDataURL(this.files[0]);
    })
    document.test.addEventListener('submit', function(e) {
      e.preventDefault();
      var binaryString = atob(preview.split(',')[1]),
          mimeType = preview.split(',')[0].match(/:(.*?);/)[1],
          length = binaryString.length,
          u8arr = new Uint8Array(length),
          blob,
          fd = new FormData(),
          xhr = new XMLHttpRequest();
      while(length--) {
        u8arr[length] = binaryString.charCodeAt(length);
      }
      blob = new Blob([u8arr.buffer], {type: mimeType});
      fd.append('file', blob);
      xhr.open('post', '/upload');
      xhr.send(fd);
    })
  </script>
</body>
</html>

  基础知识