[英]XMLHttpRequest multipart/form-data: Invalid boundary in multipart
[英]XMLHttpRequest POST multipart/form-data
我想在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(你的 - )多部分形式的數據))。 同樣,但更容易,在Firefox 4+(也在Chrome 5+和Safari 5+中),您可以使用FormData接口來幫助構建此類請求。 send
方法適用於文本內容,但是如果要發送二進制數據(如圖像),可以使用從Firefox 3.0開始的sendAsBinary
方法來完成。 有關如何通過XMLHttpRequest
發送文件的詳細信息,請參閱http://blog.igstan.ro/2009/01/pure-javascript-file-upload.html 。
沒有任何方法可以訪問javascript中的文件輸入字段,因此沒有針對ajax文件上傳的javascript解決方案。
有使用iframe的解決方法。
另一種選擇是使用SWFUpload或Google Gears之類的東西
我不明白為什么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...
}
};
您需要POST到IFrame才能使其生效,只需在表單中添加目標屬性,您可以在其中指定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);
}
這是使用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的回答
內容處理:表單數據,名稱
你應該使用分號,如下所示:Content-Disposition:form-data; 名稱
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.