XMLHttpRequest POST multipart / form-data
我想在JavaScript中使用XMLHttpRequest来发布包含文件类型输入元素的表单,以便避免页面刷新并获得有用的XML。
我可以提交表单而无需刷新页面,使用JavaScript将表单上的target属性设置为MSIE的iframe或者Mozilla的对象,但这有两个问题。较小的问题是目标与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>
如何获取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。
另一种选择是使用SWFUpload或者Google Gears之类的东西
我们将需要发布到IFrame以使其正常工作,只需在我们指定IFrame ID的表单中添加一个target属性即可。像这样的东西:
<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); }
我们可以自己构造" 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
方法来实现。有关如何通过XMLHttpRequest发送文件的详细信息,请参阅http://blog.igstan.ro/2009/01/pure-javascript-file-upload.html。