javascript - HTML5 文件 API readAsBinaryString 读取的文件比磁盘上的文件大得多

Question

完整代码在 https://gist.github.com/992562 .

我正在使用 HTML 文件 API 并通过拖放将文件通过 XHR post 上传到 PHP 脚本。在程序上，一切似乎都正常，但是当我尝试打开上传的文件时，任何非文本文件都比源文件大得多，并且无法打开。它显然与源磁盘上的数据不同。但是，文本文件完全相同，并且可以正常打开。

3 文件拖放上传的一些示例:文件 1:文本/XML:磁盘 13 KB，上传 13 KB，完美运行文件 2:图像/PNG:在磁盘上 14 KB，上传 18 KB，打不开文件 3:应用程序/XLSX:在磁盘上 12 KB，上传 14 KB，打不开

这一切都归结为这一点(在设置 xhr header 、文件对象准备好等之后):

  var reader = new FileReader();
  reader.onload = function(evt) {
    xhr.send(evt.target.result)
  }
  reader.readAsBinaryString(f);

返回大量错误数据。有什么明显的问题吗？

Answer 1

这可能是因为您将文件作为二进制字符串读取并手动构造 multipart/form-data 请求。其一，您不需要使用 FileReader。由于您只想发送内容，请尝试使用 xhr.send(File) 或 xhr.send(FormData)。后者为您构造并发送一个multipart/form-data:

function uploadFiles(url, files) {
  var formData = new FormData();

  for (var i = 0, file; file = files[i]; ++i) {
    formData.append(file.name, file);
  }

  var xhr = new XMLHttpRequest();
  xhr.open('POST', url, true);
  xhr.onload = function(e) { ... };

  xhr.send(formData);  // multipart/form-data
}

document.querySelector('input[type="file"]').onchange = function(e) {
  uploadFiles('/server', this.files);
};