null 在 xhr 请求中发送期望文件内容答案

【问题标题】：null sent expect file content in xhr requestnull 在 xhr 请求中发送期望文件内容
【发布时间】：2014-11-07 18:18:32
【问题描述】：

我必须制作一个纯轻量级的javascript/html5函数来上传文件。

差不多完成了，但是现在当我选择一个文件时，它会在服务器上创建一个同名的空白文件

我检查并看到 filereader api 无法访问该文件请看下面的描述：

    function uploadFileViaXHR(file){
         var boundary = "-------boundary";
         var content = '--' + boundary + '\r\n';
         content += 'Content-Disposition: form-data; name="file";';  
         content += 'filename="' + encodeURIComponent(file.name) + '"';  
         content += '\r\nContent-Type: application/octet-stream\r\n';  
         content += '\r\n';

         reader = new FileReader();
         reader.readAsBinaryString(file);

        content += reader.result;
        content += '\r\n--' + boundary + '--\r\n';
        console.log(content);
        var xhr = new XMLHttpRequest();
        onUploadBegin(elemId, xhr, file.name, file.size);
        $('#' + elemId).addClass('html5');

        xhr.upload.onabort = function(e) { onUploadAbort(elemId, e); };
        xhr.upload.onerror = function(e) { onUploadError(elemId, e); };
        xhr.upload.onprogress = function(e) { onUploadProgress(elemId, e); };
        xhr.onload = function(e) { onUploadComplete(elemId, e); };

        xhr.open("POST", url, true);
        xhr.setRequestHeader("Content-Type", "multipart/form-data; boundary=" + boundary);
        xhr.setRequestHeader("Cache-Control", "no-cache");

        // pseudo standard fields.
        xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
        xhr.setRequestHeader("X-File-Name", file.name);
        xhr.setRequestHeader("Content-Length", file.fileSize);
        xhr.sendAsBinary(content);
   }

此文件本地输出用于console.log

---------boundary
Content-Disposition: form-data; name="file";filename="145792_748.jpg"
Content-Type: application/octet-stream

null
---------boundary--

并在服务器端创建一个空文件当我改变这一行时： content += reader.result; 到 content += reader;

本地输出是

---------boundary
Content-Disposition: form-data; name="file";filename="145792_748.jpg"
Content-Type: application/octet-stream

[object FileReader]
---------boundary--

和服务器创建一个内容为[object FileReader] 的文件！我该如何解决这个问题？

【问题讨论】：

标签： javascript html xmlhttprequest filereader

【解决方案1】：

使用FormData 代替读取文件。

更简单

您也可以通过文件发送外部数据fd.append( 'field1', 'aaaa' );

function uploadFileViaXHR(file){

            fd = new FormData();
            fd.append( 'field1', 'aaaa' );
            fd.append( 'file', file );

        var xhr = new XMLHttpRequest;
        xhr.open('POST', url, true);

        onUploadBegin(elemId, xhr, file.name, file.size);
        $('#' + elemId).addClass('html5');

        xhr.upload.onabort = function(e) { onUploadAbort(elemId, e); };
        xhr.upload.onerror = function(e) { onUploadError(elemId, e); };
        xhr.upload.onprogress = function(e) { onUploadProgress(elemId, e); };
        xhr.onload = function(e) { onUploadComplete(elemId, e); };

        xhr.send(fd);
}

【讨论】：