Ajax如何实现提交Form表单及文件上传

这篇文章主要为大家展示了"Ajax如何实现提交Form表单及文件上传"，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下"Ajax如何实现提交Form表单及文件上传"这篇文章吧。

前几天，发现了一些小问题。我在写后台管理页面时，需要上传一张图片。于是我就用很普通的Form表单上传有一段Json串和图片文件；

Form表单上传图片只需要在

 
类型
:  
名称
:  
开始时间
:  
结束时间
:  
省
:  
市
:  
门店
:  
具体地址
:  
上传图片
:  
保存    取消    

以上是html代码，为了方便大家copy，css直接在标签里了；

有很多朋友想问，为什么写两个form表单；

这是因为根据后台接收数据的需求，传的是信息变成字符串和图片；

首先把信息变成字符串；

再放到第二个Form表单里，细心地朋友发现在第二个form表单里标签里style="display：none"这是个隐藏的标签；

不错我是通过第一个form表单获取的数据通过js变成字符串再放到隐藏的标签里；

这样通过Ajax提交第二个Form表单就可以了；

js代码：

$( '#sub' ).click( function () {　　var actTimeStart1 = $ ('#actstarttime') . datebox ('getValue');　　var actTimeStart = changeDateToLong(actTimeStart1);　　var actTimeEnd1 = $('#actendtime').datebox('getValue');　　var actTimeEnd = changeDateToLong(actTimeEnd1);　　if(actTimeStart != '' && actTimeEnd != '' && (actTimeStart - actTimeEnd > 0)){　　　　$.messager.alert('警告','结束时间不能小于开始时间！','error');　　　　return false;　　}　　else{　　　　if ($('#form_insert').form('validate')) {　　　　　　var actType = document.getElementById("acttype").value;　　　　　　var actName = document.getElementById("actname").value;　　　　　　var actArea = document.getElementById("actadd").value;　　　　　　var actTimeStart1 = $('#actstarttime').datebox('getValue');　　　　　　var actTimeStart = changeDateToLong(actTimeStart1);　　　　　　var actTimeEnd1 = $('#actendtime').datebox('getValue');　　　　　　var actTimeEnd = changeDateToLong(actTimeEnd1);　　　　　　var t2 = $('#mem_Shop').combobox('getValue');　　　　　　var jsonObj = {actType:actType,actName:actName,actTimeStart:actTimeStart,actTimeEnd:actTimeEnd,actArea:actArea,t2:t2};　　　　　　var activityMemberJson = JSON.stringify(jsonObj);　　　　　　document.getElementById("Item").value=activityMemberJson;　　　　　　var form = new FormData(document.getElementById("form_sub"));　　　　　　$.ajax({　　　　　　　　url : ../activity/actionActivityInsert', //http://www.cnblogs.com/jayxxxxxxx/　　　　　　　　type : "post",　　　　　　　　data : form, //第二个Form表单的内容　　　　　　　　processData : false,　　　　　　　　contentType : false,　　　　　　　　error : function(request) {　　　　　　　　},　　　　　　　　success : function(data) {　　　　　　　　　　$('#box').datagrid('reload');　　　　　　　　}　　　　　　});　　　　　　window_open($('#insert_form'), 'close');　　　　}else {　　　　　　$.messager.alert('警告' , '信息不完整!' , 'error');　　　　}　　}});

大家看到了我用了FormData方法，说真的这个在html5里实在是太好用了，上传图片都不用再写enctype = 'multipart/form-data'；

以上是"Ajax如何实现提交Form表单及文件上传"这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注行业资讯频道！