通过 XMLHttpRequest 将文件作为多部分发送 [英] Send a file as multipart through XMLHttpRequest

问题描述

我可以通过 XMLHttpRequest 将文件作为多部分发送到 servlet 吗?

Can I send a file as multipart by XMLHttpRequest to a servlet?

我正在制作一个表单并将其作为多部分提交，但不知何故我没有收到成功上传它的回复.我不想刷新页面，所以它必须由 Ajax 进行.

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 FormData API(以前称为XHR2"或XHR Level 2"的一部分，目前称为XHR 高级功能").

That's only possible with the 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 on the server side as form-data part with the name myFile.

您需要记住，旧版浏览器不支持 FormData API.在 caniuse.com，您可以看到它目前已在 Chrome 7+、Firefox 3.5+、Safari 中实现5+、Internet Explorer 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+, Internet Explorer 10+ and Opera 12+.

如果您使用的是 jQuery，那么您可能会尝试使用它的 $.val() 函数，如下所示:

In case you're using jQuery, then you might be tempted to use its $.val() function as below:

formData.append("myFile", $("#myFileField").val());

但这是不正确的，因为它没有返回整个 File 对象，但只是将文件名设为 String ，因为它不包含文件内容，所以完全没用.

But this is incorrect as it doesn't return the whole File object, but merely the file name as String which is utterly useless as it doesn't contain the file contents.

如果您出于某种原因不想使用 document.getElementById()，请改用以下方法之一:

If you don't want to use document.getElementById() for some reason, then use one of the following instead:

formData.append("myFile", $("#myFileField").prop("files")[0]);

formData.append("myFile", $("#myFileField")[0].files[0]);

另一种方法是使用 jQuery 表单插件.您的整个表单在没有任何 JavaScript 代码行的情况下编写并正常运行时，将立即通过以下行进行ajax化:

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

无论哪种方式，上传的文件都应该在 @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 can I upload files to a server using JSP/Servlet?

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