Question

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

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

3档拖放上传的一些示例：文件1：text / XML：在磁盘上13 KB，上传13 KB，完美运行文件2：image / 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);

返回大量不良数据。它有什么明显的错误吗？

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

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

1 个答案: