通过xmlHttpRequest将文件作为multipart发送

Question

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

Answer 1

这只能用于XHR FormDataAPI(以前称为"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插件.您的整个表单在编写并正常运行时没有任何JavaScript代码行,然后将立即使用以下行进行调整:

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

它还支持文件上传以及隐藏的iframe技巧.另请参阅此jQuery表单文档以获得深入解释.您可能只需要更改servlet代码就可以拦截正常(同步)和ajax(异步)请求.有关具体示例,请参阅此答案:使用JSP/Servlet和Ajax的简单计算器

无论哪种方式,上传的文件应该在servlet 的doPost()方法中可用,@MultipartConfig如下所示:

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

或者,如果您仍然使用Servlet 2.5或更早版本,请以通常的方式使用Apache Commons FileUpload.有关具体示例,请参阅此答案:如何使用JSP/Servlet将文件上载到服务器？