通过xmlHttpRequest发送一个文件为multipart
我可以通过XMLHttpRequest
将一个文件作为多部分发送到一个servlet吗? 我正在制作一个表单并将其作为多部分提交,但不知何故,我没有得到成功上传的响应。 我不希望页面被刷新,所以它必须由ajax进行。
这只有在XHR FormData
API (以前称为“XHR2”或“XHR Level 2”,当前称为“XHR高级function”)中才有可能。
鉴于这个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将关心适当的头文件和请求主体编码,这个例子中的文件将作为名称为myFile
form-data
部分在服务器端提供。
您需要记住,旧版浏览器不支持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. });
它也支持file upload以及隐藏的iframe技巧。 另请参阅此jQuery表单文档以获得深入的解释。 您可能只需要更改servlet代码就可以拦截正常(同步)和ajax(asynchronous)请求。 简单的计算器,具有JSP / Servlet和Ajax
无论采用哪种方法,上传的文件应该在@MultipartConfig
servlet的doPost()
方法中@MultipartConfig
,如下所示:
Part myFile = request.getPart("myFile");
或者,如果您仍然使用Servlet 2.5或更高版本,请使用Apache Commons FileUpload。 另请参阅此答案的具体示例: 如何使用JSP / Servlet将文件上载到服务器?
用xhr发送multipart/form-data
是不可能的( 更新:虽然在现代浏览器中可能用XHR2
,但请参阅BalusC的答案)。
实现它所需的常用方法是使用常规form
,而不是在iframe
。 这样,只有iframe
在上传时被刷新。