HTML5 File API readAsBinaryString 读取的文件比磁盘上的文件大得多答案

【问题标题】：HTML5 File API readAsBinaryString reads files as much larger, different than files on diskHTML5 File API readAsBinaryString 读取的文件比磁盘上的文件大得多
【发布时间】：2011-09-02 06:59:48
【问题描述】：

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

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

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

这一切都归结为这一点（在设置 xhr 标头后，文件对象准备就绪等）：

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

返回大而坏的数据。有什么明显的问题吗？

【问题讨论】：

标签： javascript html google-chrome file-upload

【解决方案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);
};

【讨论】：

我从来不知道 FormData API！谢谢：D