我需要在 Chrome 中上传文件并需要在同一请求中**发布一些参数

Question

我需要在 Chrome 中上传文件，并且需要在同一请求中发布一些参数，并且需要基本身份验证。 我想使用 javascript AJAX 来做到这一点。 但是chrome不支持sendAsBinary，我该怎么做？

function sendMsg(status){

    var user = localStorage.getObject(CURRENT_USER_KEY);
    var file = $("#imageFile")[0].files[0];

    var boundary = '----multipartformboundary' + (new Date).getTime();
    var dashdash = '--';
    var crlf     = '\r\n';

    /* Build RFC2388 string. */
    var builder = '';

    builder += dashdash;
    builder += boundary;
    builder += crlf;

    var xhr = new XMLHttpRequest();
    var upload = xhr.upload;
    xhr.onreadystatechange = function(){
        if(xhr.readyState==4){
            //
        }
    };

　　if(upload){
        upload.onprogress = function(ev){
            onprogress(ev);
        };
    }

    /* Generate headers. [STATUS] */            
    builder += 'Content-Disposition: form-data; name="status"';
    builder += crlf;
    builder += crlf; 

    /* Append form data. */
    builder += msg;
    builder += crlf;

    /* Write boundary. */
    builder += dashdash;
    builder += boundary;
    builder += crlf;

    /* Generate headers. [PIC] */            
    builder += 'Content-Disposition: form-data; name="pic"';
    if (file.fileName) {
      builder += '; filename="' + file.fileName + '"';
    }
    builder += crlf;

    builder += 'Content-Type: '+file.type;
    builder += crlf;
    builder += crlf; 

    /* Append binary data. */
    builder += file.getAsBinary(); //chrome do not support getAsBinary()
    builder += crlf;

    /* Write boundary. */
    builder += dashdash;
    builder += boundary;
    builder += crlf;

    /* Mark end of the request. */
    builder += dashdash;
    builder += boundary;
    builder += dashdash;
    builder += crlf;

    xhr.open("POST", apiUrl.sina.upload, true);
    xhr.setRequestHeader('content-type', 'multipart/form-data; boundary=' + boundary);
    xhr.setRequestHeader('Authorization', make_base_auth_header(user.userName, user.password));
    xhr.sendAsBinary(builder); //chrome do not support sendAsBinary()

    xhr.onload = function(event) { 
        /* If we got an error display it. */
        if (xhr.responseText) {
            console.log(xhr.responseText);
        }
    };
};

Answer 1

使用xhr.send(FormData)。您不需要自己构建multipart-form-data :) 在此处查看我的回复：

Javascript/HTML5 file API reading sequential files into multipart form data

Answer 2

builder += file.getAsBinary(); //chrome不支持getAsBinary()

使用FileReader API 的readAsBinaryString 方法。 Chrome 确实支持它。

xhr.sendAsBinary(builder); //镀铬做 不支持 sendAsBinary()

通过以下网址了解如何完成：

http://javascript0.org/wiki/Portable_sendAsBinary

http://code.google.com/p/chromium/issues/detail?id=35705

Answer 3

像平常一样使用表单提交文件上传请求，但将表单的目标设置为隐藏的 iframe。这不会刷新页面，但仍会上传文件。您还可以让服务器吐出一些 JavaScript 代码，这些代码一旦加载到隐藏的 iframe 中，就会告诉您文件何时上传。表格如下：

<iframe name=UploadTarget style="visibility: hidden;"></iframe>
<form method=post target=MyHiddenIframe action="Upload.php" enctype="multipart/form-data">
  <input type=file name=File1>
  <input type=button value="Upload">
</form>

要发布一些额外的参数，我发现最简单的方法是将它们附加到表单的操作字符串中：

Upload.php?MyVar1=value1&MyVar2=value2

据我所知，无法在同一个请求中读取表单数据和文件数据，但您可以从通过 URL 发送的信息中读取。