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

本文介绍了在使用模态对话框进行表单提交时,如何根据表单中是否包含文件域来选择不同的提交方法。主要涵盖了不包含文件域时简单的表单数据提交,以及包含文件域时利用HTML5 FormData或jQuery插件实现文件上传的技术细节。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值