这篇文章主要为大家展示了“Ajax如何实现提交Form表单及文件上传”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Ajax如何实现提交Form表单及文件上传”这篇文章吧。
成都创新互联公司长期为数千家客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为应城企业提供专业的网站设计制作、做网站,应城网站改版等技术服务。拥有十年丰富建站经验和众多成功案例,为您定制开发。
前几天,发现了一些小问题。我在写后台管理页面时,需要上传一张图片。于是我就用很普通的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表单及文件上传”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!