it-swarm.cn

fileReader.readAsBinaryString上传文件

尝试使用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)给了我

enter image description here

上传后显示相同的文件

enter image description here

所以它看起来像某个地方的格式化/编码问题,我尝试在原始二进制数据上使用简单的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;

这给了我的输出

enter image description here

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

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

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

73
Smudge

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

69
c69

(以下是一个迟到但完整的答案)

FileReader方法支持


FileReader.readAsBinaryString() 已弃用。不要用它! 它不再出现在 W3C File API工作草案中

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

注意:请注意File是一种扩展的Blob结构。

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

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可以。在我看来这很危险。 Blobtyped arraysArrayBuffer以及尚未实现但不必要的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.readAsArrayBuffer ( fileObject )FileReader.result。操作起来比较复杂(你必须为它做一个单独的send()),但它是 推荐的方法
  2. send()FileReader.readAsDataURL( fileObject )FileReader.result。它会产生无用的开销和压缩延迟,需要在服务器端进行解压缩步骤但是它很容易在Javascript中作为字符串进行操作。
  3. 是非标准和sendAsBinary()FileReader.readAsBinaryString( fileObject )FileReader.result

_ mdn _ 表示:

发送二进制内容的最佳方式(如在文件上传中)使用ArrayBuffers或Blobs与send()方法结合使用。但是,如果要发送可串行的原始数据,请使用sendAsBinary()方法,或使用StringView(非本机)类型的数组超类。

98
KrisWebDev

支持它的浏览器的最佳方式是将文件作为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+)。

18
Ralf