HTML5 File API readAsBinaryString读取的文件与磁盘上的文件大得多，不同之处在于

问题描述

|| 完整代码位于https://gist.github.com/992562。 我正在使用HTML File API并拖放以通过XHR帖子将文件上传到PHP脚本。程序上，一切似乎都正常，但是当我尝试打开上传的文件时，任何非文本文件都比源文件大得多，并且无法打开。显然，它与源磁盘上的数据不同。但是，文本文件完全相同，可以很好地打开。 3文件拖放上传的一些示例： 文件1：文本/ XML：在磁盘上13 KB，上传了13 KB，效果很好 文件2：图片/ PNG：磁盘上14 KB，上载18 KB，无法打开 文件3：application / XLSX：磁盘上12 KB，上传14 KB，无法打开 一切都归结为这一点（在设置xhr标头，文件对象就绪等之后）：

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

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

解决方法

这可能是因为您正在以二进制字符串形式读取文件并手动构造

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);
};