通過xmlHttpRequest發送文件爲multipart

我可以通過XMLHttpRequest將文件作爲多部分發送到servlet嗎？我正在製作一個表單並將其作爲多部分提交，但不知何故，我無法成功上傳它。我不希望頁面被刷新，所以它必須由ajax進行。通過xmlHttpRequest發送文件爲multipart

來源

2012-02-22 Tejasva Dhyani

另請參閱：[使用Ajax和PHP $ _FILES從Canvas元素髮送圖像]（http://stackoverflow.com/a/5303242/938089?sending-images-from- canvas-elements-using-ajax-and-php-files） – 2012-02-22 15:02:25

這隻有在XHR FormData API（以前稱爲「XHR2」或「XHR Level 2」的一部分，目前稱爲「XHR高級功能」）中才有可能。

鑑於此HTML，

<input type="file" id="myFileField" name="myFile" />

你可以按照以下上傳：

var formData = new FormData(); 
formData.append("myFile", document.getElementById("myFileField").files[0]); 

var xhr = new XMLHttpRequest(); 
xhr.open("POST", "myServletUrl"); 
xhr.send(formData);

XHR會照顧關於適當的頭和請求體編碼和文件將在本例中是可用服務器端名爲form-data部分名稱爲myFile。

您需要注意的是，舊版瀏覽器不支持FormData API。在caniuse.com，你可以看到它目前在Chrome 7 +，Firefox 3.5+，Safari 5+，IE 10+和Opera 12+中實現。

另一種方法是使用jQuery Form plugin。你的整個形式，書面和不JavaScript代碼的任何線正常運行時，會然後立即與剛剛以下行Ajax化：

$("#formId").ajaxForm(function(response) { 
    // Handle ajax response here. 
});

它也支持文件上傳，以及由一個隱藏的iframe的把戲。有關深入的解釋，另請參閱this jQuery Form documentation。您可能只需要更改servlet代碼即可截取普通（同步）和ajax（異步）請求。也看到這個答案對於一個具體的例子：Simple calculator with JSP/Servlet and Ajax

無論哪種方式，上傳的文件應該再處於@MultipartConfig Servlet的doPost()方法可用如下：

Part myFile = request.getPart("myFile");

或者如果你仍然在Servlet的2.5或更高版本，通常使用Apache Commons FileUpload。另請參閱此答案的具體示例：How to upload files to server using JSP/Servlet?

來源

2012-02-22 14:56:45 BalusC

如果在我們的頁面中我們自動生成許多輸入文件，會發生什麼？我們可以生成ID嗎？ – walox 2017-01-19 19:30:19

這是不可能送multipart/form-data與XHR（更新：雖然可以在現代瀏覽器，與XHR2見BalusC的答案）。

實現它的常用方法是使用常規的form，但使用iframe代替。這樣，只有iframe上傳時纔會刷新。

來源

2012-02-22 13:42:41

其實我想要一個文件是否上傳的響應。另外，我想要上傳圖片的位置。 – 2012-02-22 14:29:53

Tejasva：看看Napolux的例子，它指定了在上傳完成時如何在父窗口調用js函數。它也可以提供圖像位置。 – 2012-02-22 14:38:18

@LinusGThiel這是可能的。請參閱BalusC的答案。 – 2012-02-22 15:10:45

通過xmlHttpRequest發送文件爲multipart

回答

相關問題