您现在的位置是:网站首页> 编程资料编程资料 Ajax提交Form表单及文件上传的实例代码_AJAX相关_ 2023-05-25 407人已围观 简介 Ajax提交Form表单及文件上传的实例代码_AJAX相关_ 前几天,发现了一些小问题。我在写后台管理页面时,需要上传一张图片。于是我就用很普通的Form表单上传有一段Json串和图片文件;Form表单上传图片只需要在标签里加上enctype = 'multipart/form-data',这样是可以上传图片的;但问题来了,在我进行用Form表单提交的时候直接跳出来提交返回值的页面并且原先的页面刷新;这样我们可以先到异步的Ajax可以实现局部刷新;废话不多说了 直接上代码;首先是html:类型: 名称: 开始时间: 结束时间: 省: 市: 门店: 具体地址: 上传图片: 保存 取消 以上是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表单及文件上传的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!您可能感兴趣的文章:jquery实现ajax提交form表单的方法总结jQuery实现form表单基于ajax无刷新提交方法详解jquery序列化form表单使用ajax提交后处理返回的json数据jquery的ajax提交form表单的两种方法小结(推荐)Jquery基于Ajax方法自定义无刷新提交表单Form实例AJAX PHP无刷新form表单提交的简单实现(推荐)使用Ajax方法实现Form表单的提交及注意事项jQuery ajax提交Form表单实例(附demo源码)利用ajax提交form表单到数据库详解(无刷新) 提示: 本文由神整理自网络,如有侵权请联系本站删除! 本站声明: 1、本站所有资源均来源于互联网,不保证100%完整、不提供任何技术支持; 2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途;否则由此产生的法律后果,本站概不负责! 上一篇:ajax跨页面提交表单_AJAX相关_ 下一篇:Ajax向后台传json格式的数据出现415错误的原因分析及解决方法_AJAX相关_ 相关内容 ajax跨页面提交表单_AJAX相关_ ajax结合豆瓣搜索结果进行分页完整代码_AJAX相关_ 在dom4j中使用XPath的简单实例_AJAX相关_ js跨域调用WebService的简单实例_AJAX相关_ Ajax实现带有验证码的局部刷新登录界面_AJAX相关_ 细数Ajax请求中的async:false和async:true的差异_AJAX相关_ ajax无刷新评论功能_AJAX相关_ 使用ajax实现分页技术_AJAX相关_ Ajax入门学习教程(一)_AJAX相关_ Ajax和$.ajax使用实例详解(推荐)_AJAX相关_ 点击排行 唯唯绸否猜打一最佳正确生肖[最佳成语最佳释义解释答] TYSB手游公测版下载-TYSB官方唯一正版手游下载 _安卓网 士绅名流代表是指什么生肖数字,成语释义解释落实 洗牌猫下载-洗牌猫(卡牌对战)Shuffle Cats v0.14.8_安卓网 士绅名流代表什么生肖,成语释义解释落实 丛林动物宝宝发型沙龙游戏-丛林动物宝宝发型沙龙(休闲装扮)Baby Jungle Animal Hair Salon v1.0.10_安卓网 士绅名流是指代表什么生肖、释义成语解释落实 超人跑跑游戏下载-超人跑跑(横版动漫酷跑) v1.0.0_安卓网 本栏推荐 pandas获取对应的行或者列方式_python_ pandas如何获取某个数据的行号_python_ python进程池Pool中apply方法与apply_async方法的区别_python_ python array中关于[a,b,c]的使用方式_python_ Python进程multiprocessing.Process()的使用解读_python_ selenium常用API的使用过程记录(包括自动登录)_python_ Python使用multiprocessing如何实现多进程_python_ 猜你喜欢 pandas获取对应的行或者列方式_python_ pandas如何获取某个数据的行号_python_ python进程池Pool中apply方法与apply_async方法的区别_python_ python array中关于[a,b,c]的使用方式_python_ Python进程multiprocessing.Process()的使用解读_python_ selenium常用API的使用过程记录(包括自动登录)_python_ Python使用multiprocessing如何实现多进程_python_