使用ajax提交form表单,包括ajax文件上传

时间:2022-11-22 14:14:58
<form id="test">
<input type="file" name="img"/>
<input type="text" name="username"/>
<input type="button" value="提" onclick="test();"/>
.............
</form>

大家注意到没有,里面可是有文件的哦!

没错,FormData还支持困扰众多开发者已久的ajax的上传文件,以前我们上传文件,需要写一个表单直接刷新提交,但是这里不需要,下面给出提交代码:

function test(){
var form = new FormData(document.getElementById("tf"));
// var req = new XMLHttpRequest();
// req.open("post", "${pageContext.request.contextPath}/public/testupload", false);
// req.send(form);
$.ajax({
url:"${pageContext.request.contextPath}/public/testupload",
type:"post",
data:form,
processData:false,
contentType:false,
success:function(data){
window.clearInterval(timer);
console.log("over..");
},
error:function(e){
alert("错误!!");
window.clearInterval(timer);
}
});
get();//此处为上传文件的进度条
}

  参考文档:http://www.cnblogs.com/zhuxiaojie/p/4783939.html