通过xmlHttpRequest将文件作为multipart发送 [英] Send a file as multipart through xmlHttpRequest

问题描述

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

Can I send a file as multipart by XMLHttpRequest to a servlet? I am making a form and submitting it as multipart, but somehow I am not getting a response for successfully uploading it. I do not want the page to be refreshed, so it has to take place by ajax.

推荐答案

这是唯一可能的XHR < a href =https://xhr.spec.whatwg.org/#interface-formdata =noreferrer> FormData API （以前称为部分为XHR2或XHR Level 2，目前称为XHR高级功能。

That's only possible with XHR FormData API (previously known being part of as "XHR2" or "XHR Level 2", currently known as "XHR Advanced Features").

鉴于此HTML，

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

您可以按如下方式上传：

you can upload it as below:

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 。

XHR will take care about proper headers and request body encoding and the file will in this example be available in the server side as form-data part with the name myFile.

您需要记住，旧版浏览器不支持 FormData API。在 caniuse.com 上，您可以看到它目前已在Chrome 7 +，Firefox 3.5 +，Safari 5中实施+，IE 10+和Opera 12 +。

You need to keep in mind that FormData API is not supported in older browsers. At caniuse.com you can see that it's currently implemented in Chrome 7+, Firefox 3.5+, Safari 5+, IE 10+ and Opera 12+.

另一种方法是使用 jQuery表单插件。您的整个表单在编写并正常运行时没有任何JavaScript代码行，然后会立即通过以下行进行调整：

An alternative is to use the jQuery Form plugin. Your entire form, when written and functioning properly without any line of JavaScript code, will then instantly be ajaxified with just the following line:

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

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

It also supports file uploads as well by a hidden iframe trick. See also this jQuery Form documentation for an in depth explanation. You may only need to change the servlet code to be able to intercept on both normal (synchronous) and ajax (asynchronous) requests. See also this answer for a concrete example: Simple calculator with JSP/Servlet and Ajax

无论哪种方式，上传的文件都应该在 doPost（）方法中可用=http://docs.oracle.com/javaee/6/api/javax/servlet/annotation/MultipartConfig.html\"rel =noreferrer> @MultipartConfig servlet如下：

Either way, the uploaded file should then be available in the doPost() method of a @MultipartConfig servlet as follows:

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

或者，如果您仍然使用Servlet 2.5或更早版本，请按照常规方式使用Apache Commons FileUpload。有关具体示例，请参阅此答案：如何将文件上传到服务器使用JSP / Servlet？

Or if you're still on Servlet 2.5 or older, use Apache Commons FileUpload the usual way. See also this answer for a concrete example: How to upload files to server using JSP/Servlet?

这篇关于通过xmlHttpRequest将文件作为multipart发送的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！