Question

我可以通过XMLHttpRequest将文件作为多部分发送到servlet吗？我正在制作一个表单并将其作为multipart提交，但不知何故我没有得到成功上传它的响应。我不希望刷新页面，因此必须由ajax进行。

Answer 1

只有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代码行，然后会立即被以下行格式化：

$("#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?

Answer 2

使用xhr发送multipart/form-data是不可能的（更新：虽然可以在现代浏览器中使用XHR2发送。请参阅BalusC的回答。）

实现目标的常用方法是使用常规form，而不是iframe。这样，上传时只会刷新iframe。

通过xmlHttpRequest将文件作为multipart发送

2 个答案: