欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

模态对话框(解决上传文件)

程序员文章站 2022-07-03 07:58:40
...
对于以模态对话框的方式,实现新增|修改等功能时,在使用ajax提交表单数据的时候,必须考虑表单是否包含文件域。

情况1:不包含文件域

  按照$("#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);
}
});


情况2:包含文件域

  做法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);
}
});


  做法2:使用jquery.form.js插件


        <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("上传失败了");
            } 
        });

相关标签: 模态对话框