最近在项目中遇到了一个一个小问题,有一个带文件的表单需要用ajax提交,一般不带文件的表单,我们会用到如下的提交方式:
HTML代码
<form id="myformz" action="" method="post">
用户名<input type="text" id="mobile" name="mobile">
密码<input type="text" id="passwd" name="passwd">
<input type="button" onClick="sbum();">
</form>
js代码
<script type="text/javascript">
function subm() {
$.ajax({
type : "POST",//提交方式
url : "loginController/texts.do",//提交地址
data : $("#myformz").serialize(),//序列化表单值,创建 URL 编码文本字符串。
success : function(data) {
alert("请求成功");
},
erreo : function(request) {
alert("请求失败");
}
});
}
</script>
但是,这种方式是不能提交文件的,后台根本检测不到提交的数据中有文件; data : $(“#myformz”).serialize(),//序列化表单值,创建 URL 编码文本字符串。这段代码就是把表单的值序列化了。固然后台接不到文件信息,接下来就可以用如下方式解决。请看代码:
HTML代码
<form id="myForm">
用户名<input type="text" id="mobile" name="mobile">
密码<input type="text" id="passwd" name="passwd">
图片<input type="file" id="lastname" name="file">
<input type="button" onClick="sbum();">
</form>
js代码
<script type="text/javascript">
//验证上传的图片格式是否正确
function subm() {
var filepath = $("input[name='file']").val();
if(filepath !=""){
var extStart = filepath.lastIndexOf(".");
var ext = filepath.substring(extStart, filepath.length).toUpperCase();
if (ext != ".BMP" && ext != ".PNG" && ext != ".GIF" && ext != ".JPG"
&& ext != ".JPEG") {
alert("图片限于bmp,png,gif,jpeg,jpg格式");
return false;
} else {
//提交表单
submTo();
}
}else{
//提交表单
submTo();
}
}
//提交表单的方法
function submTo(){
var form=new FormData(document.getElementById("myForm"));//拿到表单对象
$.ajax({
type : "POST",//提交方式
url : "gallery/updateGa.do",//提交地址
data:form,
processData:false,
contentType:false,
success : function(data) {
if(data=="1"){
alert("修改成功!");
}else{
alert("网络错误,请重试!!!");
}
},
erreo : function(request) {
alert("网络错误,请重试!!!");
}
});
}
</script>
上述代码中 processData:false, contentType:false,
必须设置为false。如上所示,一个简单的带文件的表单提交就完成了。