小编典典

通过xmlHttpRequest多部分发送文件

ajax

我可以将文件作为多部分发送XMLHttpRequest到servlet吗?我正在制作表单并将其作为多部分提交,但是以某种方式我没有收到成功上传它的回复。我不希望刷新页面,因此它必须由ajax进行。


阅读 362

收藏
2020-07-26

共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。

2020-07-26