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

Question

完整代码,请访问https://gist.github.com/992562.

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

关于3文件拖放上传的一些示例:文件1:文本/ 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);
};