我想在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流?
您可以自己构建“multipart / form-data”请求(在http://www.faqs.org/rfcs/rfc2388.html上阅读更多相关信息),然后使用send
方法(即xhr.send(your-multipart-form-data))。同样,但更简单,在Firefox 4+(也在Chrome 5+和Safari 5+中),您可以使用FormData界面来帮助构建此类请求。 send
方法适用于文本内容,但如果您想发送二进制数据(如图像),可以借助于Firefox 3.0开始的sendAsBinary
方法来实现。有关如何通过qazxswpoi发送文件的详细信息,请参阅XMLHttpRequest
。
没有任何方法可以访问javascript中的文件输入字段,因此没有针对ajax文件上传的javascript解决方案。
像http://blog.igstan.ro/2009/01/pure-javascript-file-upload.html这样的解决方法。
另一种选择是使用像using an iframe或SWFUpload这样的东西
我不明白为什么iframe(一个看不见的)暗示XHTML而不是任何内容。如果您使用iframe,则可以设置onreadystatechange事件并等待“完成”。接下来你可以使用frame.window.document.innerHTML(请有人纠正我)来获取字符串结果。
Google Gears
您需要POST到IFrame才能使其生效,只需在表单中添加目标属性,您可以在其中指定IFrame ID。像这样的东西:
var lFrame = document.getElementById('myframe');
lFrame.onreadystatechange = function()
{
if (lFrame.readyState == 'complete')
{
// your frame is done, get the content...
}
};
我对你指定的onload事件感到困惑,它是在页面上还是在iframe上?,第一个答案是正确的,没有办法使用纯xmlhttprequest这样做,如果你想要实现的是一旦响应存在就触发一些方法在iframe上,只需检查它是否已经使用DOM脚本编写内容,然后触发该方法。
将onload事件附加到iframe
<form method="post" target="myiframe" action="handler.php">
...
</form>
<iframe id="myiframe" style="display:none" />
内容处理:表单数据,名称
你应该使用分号,如下所示:Content-Disposition:form-data;名称
这是使用FormData(if(window.attachEvent){
document.getElementById(iframe).attachEvent('onload', some_method);
}else{
document.getElementById(iframe).addEventListener('load', some_method, false);
}
)的最新方式
脚本:
full doc @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();
});
再次感谢Alex Polo的回答