模态对话框（解决上传文件）

最新推荐文章于 2021-07-22 14:03:17 发布

原创最新推荐文章于 2021-07-22 14:03:17 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#模态对话框

模态对话框专栏收录该内容

1 篇文章

订阅专栏

本文介绍了在使用模态对话框进行表单提交时，如何根据表单中是否包含文件域来选择不同的提交方式。如果不包含文件域，则可以直接使用$.post()方法；如果包含文件域，则需要使用FormData对象或引入jquery.form.js插件来完成文件上传。

[color=blue][b]对于以模态对话框的方式，实现新增|修改等功能时，在使用ajax提交表单数据的时候，必须考虑表单是否包含文件域。
[/b][/color]
[b]情况1:不包含文件域[/b]

按照$("#form的id").serialize()或者.serializeArray()或者表单数据

然后再使用$.post();

var formdata = $("#form1").serializeArray();//无法上传文件的
alert(formdata);
var url ="<%= request.getContextPath()%>/upload/demo1";
$.ajax({
url:url,
data:formdata, //name=zhangsan&age=50 {}
contentType: false,//默认: "application/x-www-form-urlencoded"
processData: false,//设置 processData 选项为 false，防止自动转换数据格式
type:"post",
dataType:"json",
success:function(data){
alert(data);
},
error:function(er){
alert(er.responseText);
}
});

[b]情况2：包含文件域[/b]

做法1：使用html5提供的新特性：FormData

var formdata = new FormData(document.getElementById("form1"));//可以上传文件

var url ="<%= request.getContextPath()%>/upload/demo1";
$.ajax({
url:url,
data:formdata, //name=zhangsan&age=50 {}
contentType: false,//默认: "application/x-www-form-urlencoded"
processData: false,//设置 processData 选项为 false，防止自动转换数据格式
type:"post",
dataType:"json",
success:function(data){
alert(data);
},
error:function(er){
alert(er.responseText);
}
});

[b]
做法2：使用jquery.form.js插件[/b]

<script type="text/javascript" src="jquery-1.10.2.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>

var url ="<%= request.getContextPath()%>/upload/demo2";

$("#form1").ajaxSubmit({
type:'post',
url:url,
clearForm:true,//清空所有表单元素的值
resetForm:true,//重置所有表单元素的值
success:function(data){
alert(data);
},
error:function(XmlHttpRequest,textStatus,errorThrown){
alert("上传失败了");
}
});