XMLHttpRequest POST multipart / form-data

Question

我想在JavaScript中使用XMLHttpRequest来POST一个包含文件类型输入元素的表单，这样我就可以避免页面刷新并获得有用的XML。

我可以在没有页面刷新的情况下提交表单，使用JavaScript将表单上的目标属性设置为MSIE的iframe或Mozilla的对象，但这有两个问题。 小问题是目标不符合W3C（这就是为什么我在JavaScript中设置它，而不是在XHTML中设置它）。 主要问题是onload事件不会触发，至少不会触发OS X Leopard上的Mozilla。 此外，XMLHttpRequest会产生更漂亮的响应代码，因为返回的数据可能是XML，而不是像iframe那样仅限于XHTML。

提交表单会产生如下HTTP的HTTP：

Content-Type: multipart/form-data;boundary=<boundary string>
Content-Length: <length>
--<boundary string>
Content-Disposition: form-data, name="<input element name>"

<input element value>
--<boundary string>
Content-Disposition: form-data, name=<input element name>"; filename="<input element value>"
Content-Type: application/octet-stream

<element body>

如何获取XMLHttpRequest对象的send方法来复制上述HTTP流？

Answer 1

你可以自己构建'multipart / form-data'请求（在http://www.faqs.org/rfcs/rfc2388.html上阅读更多相关信息），然后使用send方法（即xhr.send（你的 - ）多部分形式的数据））。 同样，但更容易，在Firefox 4+（也在Chrome 5+和Safari 5+中），您可以使用FormData接口来帮助构建此类请求。 send方法适用于文本内容，但是如果要发送二进制数据（如图像），可以使用从Firefox 3.0开始的sendAsBinary方法来完成。 有关如何通过XMLHttpRequest发送文件的详细信息，请参阅http://blog.igstan.ro/2009/01/pure-javascript-file-upload.html 。

Answer 2

没有任何方法可以访问javascript中的文件输入字段，因此没有针对ajax文件上传的javascript解决方案。

有使用iframe的解决方法。

另一种选择是使用SWFUpload或Google Gears之类的东西

Answer 3

我不明白为什么iframe（一个看不见的）暗示XHTML而不是任何内容。 如果您使用iframe，则可以设置onreadystatechange事件并等待“完成”。 接下来你可以使用frame.window.document.innerHTML（请有人纠正我）来获取字符串结果。

var lFrame = document.getElementById('myframe');
lFrame.onreadystatechange = function()
{
   if (lFrame.readyState == 'complete')
   {
      // your frame is done, get the content...
   }
};

Answer 4

您需要POST到IFrame才能使其生效，只需在表单中添加目标属性，您可以在其中指定IFrame ID。 像这样的东西：

<form method="post" target="myiframe" action="handler.php">
...
</form>
<iframe id="myiframe" style="display:none" />

Answer 5

我对你指定的onload事件感到困惑，它是在页面上还是在iframe上？，第一个答案是正确的，没有办法使用纯xmlhttprequest这样做，如果你想要实现的是一旦响应存在就触发一些方法在iframe上，只需检查它是否已经使用DOM脚本编写内容，然后触发该方法。

将onload事件附加到iframe

if(window.attachEvent){
 document.getElementById(iframe).attachEvent('onload', some_method);
}else{
 document.getElementById(iframe).addEventListener('load', some_method, false);
} 

Answer 6

这是使用FormData的最新方法（ 完整文档@MDN ）

脚本：

var form = document.querySelector('#myForm');
form.addEventListener("submit", function(e) {
    var xhr = new XMLHttpRequest();
    xhr.open("POST", this.action);
    xhr.addEventListener("load", function(e) {
        // Your callback
    });

    xhr.send(new FormData(this));

    e.preventDefault();
});

（从这个基本形式）

<form id="myForm" action="..." method="POST" enctype="multipart/form-data">
    <input type="file" name="file0">
    <input type="text" name="some-text">
    ...
</form>

再次感谢Alex Polo的回答

Answer 7

内容处理：表单数据，名称

你应该使用分号，如下所示：Content-Disposition：form-data; 名称