XMLHttpRequest POST multipart/form-data

我想在JavaScript中使用XMLHttpRequest來發布包含文件類型輸入元素的表單，以便我可以避免頁面刷新並獲取有用的XML。XMLHttpRequest POST multipart/form-data

我可以提交沒有頁面刷新的表單，使用JavaScript將表單上的目標屬性設置爲MSIE的iframe或Mozilla的對象，但這有兩個問題。小問題是目標不符合W3C標準（這就是爲什麼我將它設置爲JavaScript而不是XHTML）。主要的問題是onload事件不會觸發，至少不會在OS X Leopard上的Mozilla上觸發。此外，XMLHttpRequest會使更漂亮的響應代碼，因爲返回的數據可能是XML，而不像iframe那樣侷限於XHTML。

1.5.2 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對象的發送方法複製上述HTTP流？

來源

2008-09-30 Robin like the bird

9年後你已經接受了答案！你是stackexchange上的第二個。 – peterh 2017-03-24 16:15:04

可以構建「多部分/格式數據」請求自己（在http://www.faqs.org/rfcs/rfc2388.html閱讀更多關於它），然後使用send方法（即XHR。發送（您-多形式的數據））。同樣，但更容易，在Firefox 4+（也可以在Chrome 5+和Safari 5+中），您可以使用幫助構建此類請求的接口。 send方法適用於文本內容，但如果要發送二進制數據（如圖像），則可以使用從Firefox 3.0開始的sendAsBinary方法的幫助。有關如何通過XMLHttpRequest發送文件的詳細信息，請參閱http://blog.igstan.ro/2009/01/pure-javascript-file-upload.html。

來源

2010-11-21 23:02:18

聖***。謝謝！試圖找出如何手動做一個小時與我的服務器無法解析我發送的 – 2017-12-31 13:41:59

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

來源

2008-09-30 22:42:31 helios

沒有任何方法可以訪問JavaScript內部的文件輸入字段，所以沒有任何JavaScript的Ajax文件上傳解決方案。

有像using an iframe這樣的解決方法。

另一種選擇是使用像SWFUpload或Google Gears

來源

2008-09-30 22:42:40 TonyB

您需要發佈到iframe來得到這個工作，只是一個目標屬性添加到您的形式，在那裏你指定的IFrame ID。事情是這樣的：

 

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

來源

2008-09-30 22:45:52 mmattax

我很迷惑關於您所指定的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); 
}

來源

2008-10-04 18:15:57 Komang

內容處置：表格數據，名稱

你應該使用分號，就像這樣：內容處置：表格數據;命名

來源

2011-06-29 15:27:23 Aldekein

這裏是一個高達使用FORMDATA（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(); 
});

（從這個基本形式）再次

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

感謝Alex波羅他回答

來源

2017-12-31 13:58:56

XMLHttpRequest POST multipart/form-data

回答

相關問題