HTML5 File API readAsBinaryString读取文件的大小与磁盘上的文件不同

Question

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

我正在使用HTML File 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); 

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

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