86

尝试使用 fileReader.readAsBinaryString 通过 AJAX 将 PNG 文件上传到服务器，剥离代码（fileObject 是包含我文件信息的对象）；

var fileReader = new FileReader();

fileReader.onload = function(e) {
    var xmlHttpRequest = new XMLHttpRequest();
    //Some AJAX-y stuff - callbacks, handlers etc.
    xmlHttpRequest.open("POST", '/pushfile', true);
    var dashes = '--';
    var boundary = 'aperturephotoupload';
    var crlf = "\r\n";

    //Post with the correct MIME type (If the OS can identify one)
    if ( fileObject.type == '' ){
        filetype = 'application/octet-stream';
    } else {
        filetype = fileObject.type;
    }

    //Build a HTTP request to post the file
    var data = dashes + boundary + crlf + "Content-Disposition: form-data;" + "name=\"file\";" + "filename=\"" + unescape(encodeURIComponent(fileObject.name)) + "\"" + crlf + "Content-Type: " + filetype + crlf + crlf + e.target.result + crlf + dashes + boundary + dashes;

    xmlHttpRequest.setRequestHeader("Content-Type", "multipart/form-data;boundary=" + boundary);

    //Send the binary data
    xmlHttpRequest.send(data);
}

fileReader.readAsBinaryString(fileObject);

在上传之前检查文件的前几行（使用 VI）给了我

在此处输入图像描述

上传后显示相同的文件

在此处输入图像描述

所以它看起来像是某个地方的格式/编码问题，我尝试对原始二进制数据使用简单的 UTF8 编码函数

    function utf8encode(string) {
        string = string.replace(/\r\n/g,"\n");
        var utftext = "";

        for (var n = 0; n < string.length; n++) {

            var c = string.charCodeAt(n);

            if (c < 128) {
                utftext += String.fromCharCode(c);
            }
            else if((c > 127) && (c < 2048)) {
                utftext += String.fromCharCode((c >> 6) | 192);
                utftext += String.fromCharCode((c & 63) | 128);
            }
            else {
                utftext += String.fromCharCode((c >> 12) | 224);
                utftext += String.fromCharCode(((c >> 6) & 63) | 128);
                utftext += String.fromCharCode((c & 63) | 128);
            }

        }

        return utftext;
    )

然后在原始代码中

//Build a HTTP request to post the file
var data = dashes + boundary + crlf + "Content-Disposition: form-data;" + "name=\"file\";" + "filename=\"" + unescape(encodeURIComponent(file.file.name)) + "\"" + crlf + "Content-Type: " + filetype + crlf + crlf + utf8encode(e.target.result) + crlf + dashes + boundary + dashes;

这给了我输出

在此处输入图像描述

仍然不是原始文件是什么=（

如何编码/加载/处理文件以避免编码问题，因此在 HTTP 请求中接收到的文件与上传之前的文件相同。

其他一些可能有用的信息，如果不是使用 fileReader.readAsBinaryString() 我使用 fileObject.getAsBinary() 来获取二进制数据，它工作正常。但 getAsBinary 仅适用于 Firefox。我一直在 Mac 上的 Firefox 和 Chrome 中对此进行测试，两者都得到了相同的结果。后端上传由NGINX 上传模块处理，再次在 Mac 上运行。服务器和客户端在同一台机器上。我尝试上传的任何文件都会发生同样的事情，我只是选择了 PNG，因为它是最明显的例子。

4

3 回答 3

111

（以下是迟到但完整的答案）

FileReader 方法支持

FileReader.readAsBinaryString()已弃用。不要使用它！它不再在W3C 文件 API 工作草案中：

void abort();
void readAsArrayBuffer(Blob blob);
void readAsText(Blob blob, optional DOMString encoding);
void readAsDataURL(Blob blob);

注意：注意这File是一种扩展Blob结构。

Mozilla 仍然在MDN FileApi 文档readAsBinaryString()中实现和描述它：

void abort();
void readAsArrayBuffer(in Blob blob); Requires Gecko 7.0
void readAsBinaryString(in Blob blob);
void readAsDataURL(in Blob file);
void readAsText(in Blob blob, [optional] in DOMString encoding);

在我看来，弃用的原因readAsBinaryString()如下：JavaScript 字符串的标准是DOMString只接受 UTF-8 字符，而不是随机二进制数据。所以不要使用 readAsBinaryString()，这根本不安全且不符合 ECMAScript 标准。

我们知道JavaScript 字符串不应该存储二进制数据，但某种形式的 Mozilla 可以。在我看来这很危险。Blob和typed arrays（ArrayBuffer以及尚未实现但不是必需StringView的）是为了一个目的而发明的：允许使用纯二进制数据，没有 UTF-8 字符串限制。

XMLHttpRequest 上传支持

XMLHttpRequest.send()具有以下调用选项：

void send();
void send(ArrayBuffer data);
void send(Blob data);
void send(Document data);
void send(DOMString? data);
void send(FormData data);

XMLHttpRequest.sendAsBinary()具有以下调用选项：

void sendAsBinary(   in DOMString body );

sendAsBinary() 不是标准，Chrome 可能不支持。

解决方案

所以你有几个选择：

  1. send()的。FileReader.result_ FileReader.readAsArrayBuffer ( fileObject )操作起来更复杂（你必须为它制作一个单独的 send() ），但这是推荐的方法。
  2. send()的。FileReader.result_ FileReader.readAsDataURL( fileObject )它会产生无用的开销和压缩延迟，需要在服务器端进行解压缩步骤，但它很容易在 Javascript 中作为字符串进行操作。
  3. 非标准和sendAsBinary()_FileReader.resultFileReader.readAsBinaryString( fileObject )

MDN指出：

发送二进制内容（如文件上传）的最佳方式是将 ArrayBuffers 或 Blob 与 send() 方法结合使用。但是，如果要发送可字符串化的原始数据，请改用 sendAsBinary() 方法或 StringView（非本机）类型数组超类。

于 2013-07-07T12:26:05.070 回答
75

使用fileReader.readAsDataURL( fileObject )，这会将其编码为 base64，您可以安全地将其上传到您的服务器。

于 2011-09-15T13:17:25.247 回答
26

在支持它的浏览器中，最好的方法是将文件作为 Blob 发送，或者如果您想要多部分表单，则使用 FormData。您不需要 FileReader。这比尝试读取数据更简单、更有效。

如果您特别想将其发送为multipart/form-data，您可以使用 FormData 对象：

var xmlHttpRequest = new XMLHttpRequest();
xmlHttpRequest.open("POST", '/pushfile', true);
var formData = new FormData();
// This should automatically set the file name and type.
formData.append("file", file);
// Sending FormData automatically sets the Content-Type header to multipart/form-data
xmlHttpRequest.send(formData);

您也可以直接发送数据，而不是使用multipart/form-data. 请参阅文档。当然，这也需要在服务器端进行更改。

// file is an instance of File, e.g. from a file input.
var xmlHttpRequest = new XMLHttpRequest();
xmlHttpRequest.open("POST", '/pushfile', true);

xmlHttpRequest.setRequestHeader("Content-Type", file.type);

// Send the binary data.
// Since a File is a Blob, we can send it directly.
xmlHttpRequest.send(file);

有关浏览器支持，请参阅：http ://caniuse.com/#feat=xhr2 （大多数浏览器，包括 IE 10+）。

于 2014-10-20T09:50:18.637 回答