通过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

回答

相关问题