通过xmlHttpRequest多部分发送文件

Question

我可以将文件作为多部分发送XMLHttpRequest到servlet吗？我正在制作表单并将其作为多部分提交，但是以某种方式我没有收到成功上传它的回复。我不希望刷新页面，因此它必须由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
Form文档以获取详细说明。您可能只需要更改servlet代码，以便能够在正常（同步）和ajax（异步）请求上进行拦截。

无论哪种方式，上传的文件都可以在servlet的doPost()方法中使用@MultipartConfig，如下所示：

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

或者，如果您仍在使用Servlet 2.5或更早版本，请按常规方式使用Apache Commons
FileUpload。