Javascript XMLHttpRequest POST多部分/表单数据

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

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

在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>

内容类型：多部分/表单数据；边界=
内容长度：
--
内容处置：表单数据，name=“”
--
内容处置：表单数据，name=“；filename=“”
内容类型：应用程序/八位字节流

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

我不明白为什么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...
   }
};

---

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

有类似的解决方法

---

另一个选项是使用类似或的内容。您需要发布到IFrame以使其正常工作，只需在表单中添加一个target属性，在其中指定IFrame ID。类似以下内容：

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

...

---

我对您指定的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);
} 

---

您可以自己构造“多部分/表单数据”请求（在上阅读更多信息），然后使用

send

方法（即xhr.send（您的多部分表单数据））。类似地，在Firefox4+（也在Chrome 5+和Safari 5+中）也更容易您可以使用有助于构造此类请求的界面。

send

方法适用于文本内容，但如果您想发送图像等二进制数据，可以使用Firefox 3.0开始使用的

sendAsBinary

方法。有关如何通过

XMLHttpRequest，请参阅

内容配置：表单数据、名称

您应该使用分号，如下所示：Content Disposition:form data；name
这是使用FormData（）的最新方法

脚本：

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();
});

（来自此基本表单）


...

再次感谢Alex Polo的回答
9年后你接受了一个答案！你是stackexchange上第二个使用它的人。天哪***。谢谢！我的服务器无法解析我所感知的内容，我尝试了一个小时手动执行此操作。如果能对这些链接中的重要内容进行一点总结，那就太好了服务器被关闭了。
<form id="myForm" action="..." method="POST" enctype="multipart/form-data">
    <input type="file" name="file0">
    <input type="text" name="some-text">
    ...
</form>