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

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

FileReader对FormData的破坏

2 个答案: