到目前为止,XMLHttpRequest
从jQuery使用的当前版本1开始, 使用JavaScript上传文件XMLHttpRequest
。常见的解决方法是让JavaScript创建一个隐藏文件,<iframe>
然后向其提交表单,以便创建印象,使它异步发生。这也正是大多数jQuery文件上传插件所做的事情,例如jQuery Form插件(此处为示例)。
假设您用HTML表单重写了JSP,这样当客户端禁用JS时它就不会 (就像您现在使用的…),如下所示:
<form id="upload-form" class="upload-@R_226_2419@" action="/Upload" method="post" enctype="multipart/form-data">
<input type="file" id="file" name="file1" />
<span id="upload-error" class="error">${uploadError}</span>
<input type="submit" id="upload-button" value="upload" />
</form>
然后在jQuery Form插件的帮助下,
<script src="jquery.js"></script>
<script src="jquery.form.js"></script>
<script>
$(function() {
$('#upload-form').ajaxForm({
success: function(msg) {
alert("File has been uploaded successfully");
},
error: function(msg) {
$("#upload-error").text("Couldn't upload file");
}
});
});
</script>
至于servlet方面,这里不需要做任何特殊的事情。只需使用与不使用Ajax时完全相同的方法来实现它:如何使用JSP / Servlet将文件上传到服务器?
如果X-Requested-With
标头等于XMLHttpRequest
或不相等,您只需要在servlet中进行一次额外的检查,这样您就可以知道在客户端禁用JS的情况下如何返回响应(到目前为止,它大多是较旧的移动设备禁用了JS的浏览器)。
if ("XMLHttpRequest".equals(request.getHeader("X-Requested-With"))) {
// Return ajax response (e.g. write JSON or XML).
} else {
// Return regular response (e.g. forward to JSP).
}
请注意,相对较新的XMLHttpRequest
版本2能够使用new File
和FormData
API发送所选文件。