使用 FileReader 损坏 FormData

Question

我正在构建一个 ajax 文件上传器，这要归功于新的FormData 接口。如果我使用原始文件，它可以工作，但如果我将文件转换为二进制字符串，然后再转换为 blob，则生成的文件已损坏。我做错了什么？

<!DOCTYPE html>
<html>
  <body>
    <form method=post enctype=multipart/form-data id=form>
      <input id=file type=file name=file>
      <button id=1>1</button>
      <button id=2>2</button>
    </form>
    <script>
      var d = document;

      function $(id) { return d.getElementById(id); };

      function xhr(fd) {
        var x = new XMLHttpRequest();
        x.open('post', '/', true);
        x.send(fd);
      };

      $(1).addEventListener('click', function(e) {
          e.preventDefault();
          var file = $('file').files[0];
          var fd = new FormData();
          fd.append('file', file);
          xhr(fd);
        }, false
      );

      $(2).addEventListener('click', function(e) {
          e.preventDefault();
          var file = $('file').files[0];
          var fr = new FileReader();
          fr.onload = function(e) {
            var bb = new (window.BlobBuilder ||
              window.MozBlobBuilder || window.WebKitBlobBuilder)()
            bb.append(e.target.result);
            var b = bb.getBlob(file.type);
            var fd = new FormData();
            fd.append('file', b);
            xhr(fd);
          };
          fr.readAsBinaryString(file);
        }, false
      );
    </script>
  </body>
</html>

Blob BlobBuilder FileReader FormData

已编辑以包含链接

Answer 1

我通过将字符串转换为 Uint8Array 使其在 Firefox / Chrome 中工作：

var result = e.target.result;
var l = result.length
var ui8a = new Uint8Array(l)
for (var i = 0; i < l; i++)
  ui8a[i] = result.charCodeAt(i);
bb.append(ui8a.buffer)

Answer 2

我不熟悉这些对象中的大多数，但我注意到您在第二个事件侦听器的fr.onload 函数中引用了file.type。那时file 在范围内吗？你不应该改用e 吗？