我们知道表单提交实现文件上传时，需要将表单的enctype值设置为multipart/form-data
<form enctype="multipart/form-data">
<input type="file" name="icon" id="iconFile">
</form>
但是表单提交无法做到页面无刷新，我们知道让页面无刷新请求可以使用ajax
那么我们就来说说利用ajax如何实现文件的上传
大家可以打开JQuery在线文档，查看详细参数说明：JQuery在线文档
$('#iconFile').change(function () {
// 构建一个虚拟表单,此表单类型默认为multipart/form-data类型
var formData=new FormData();
// 给表单追加参数(图片)
formData.append("iconFile", document.getElementById("iconFile").files[0]);
// 还可以追加普通参数
formData.append("username", 'root');
formData.append("password", 'admin');
$.ajax({
url:"${pageContext.request.contextPath}/uploadServlet",
processData:false, //默认为true,对请求传递的参数(formData)不做编码处理
contentType : false, //不对请求头做处理(ajax请求默认的contentType为application/x-www-form-urlencoded)
data:formData,
type:"post",
async:true,
success:function (status) {
if(status=='200'){
alert("文件上传成功！");
}else{
alert("文件上传失败！");
}
},
error:function (data) {
alert("文件上传失败！");
}
});
});
processData：
类型：Boolean
默认值：true，在使用ajax发送请求时，会把data传递进来的参数转换成一个字符串。如果不希望转换为其他的信息可以设置为false。例如上面的文件上传传递的是一个iconFile的DOM树。
contentType：
post提交默认为
"application/x-www-form-urlencoded"，get方式提交默认为null，
文件上传提交方式为"multipart/form-data"，在文件提交时，设置为false，避免JQuery对其进行操作。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/131870.html
