前段时间在做程序的时候发现一个小问题，在写后台管理上传图片时，在我进行用Form表单提交的时候直接跳出来提交返回值的页面并且原先的页面刷新，下面小编通过分享本文给大家解析下
前几天，发现了一些小问题。我在写后台管理页面时，需要上传一张图片。于是我就用很普通的Form表单上传有一段Json串和图片文件；
Form表单上传图片只需要在标签里加上enctype = ‘multipart/form-data’，这样是可以上传图片的；
但问题来了，在我进行用Form表单提交的时候直接跳出来提交返回值的页面并且原先的页面刷新；
这样我们可以先到异步的Ajax可以实现局部刷新；
废话不多说了 直接上代码；
首先是html：
<table style="font-size: 13px;margin: 13px auto"> <tr> <td style="text-align: right">类型</td><td>: </td></tr><tr><td colspan="2" style="height: 13px"></td></tr><tr> <td style="text-align: right">名称</td><td>: </td></tr><tr><td colspan="2" style="height: 13px"></td></tr><tr> <td style="text-align: right">开始时间</td><td>: </td></tr><tr><td colspan="2" style="height: 13px"></td></tr><tr> <td style="text-align: right">结束时间</td><td>: </td></tr><tr><td colspan="2" style="height: 13px"></td></tr><tr> <td style="text-align: right">省</td><td>: </td></tr><tr><td colspan="2" style="height: 13px"></td></tr><tr> <td style="text-align: right">市</td><td>: </td></tr><tr><td colspan="2" style="height: 13px"></td></tr><tr> <td style="text-align: right">门店</td><td>: </td></tr><tr><td colspan="2" style="height: 13px"></td></tr><tr> <td style="text-align: right">具体地址</td><td>: </td></tr></table> <table style="font-size: 13px;margin: 13px auto"> <tr> <td style="text-align: right">上传图片</td><td>: </td><td></td></tr></table><div style="text-align:right;padding:2px 5px"> 保存 取消 </div>
以上是html代码，为了方便大家copy，css直接在标签里了；
有很多朋友想问，为什么写两个form表单；
这是因为根据后台接收数据的需求，传的是信息变来源gaodai#ma#com搞*!代#%^码网成字符串和图片；
首先把信息变成字符串；
再放到第二个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表单及文件上传的实例代码的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：Ajax提交Form表单及文件上传的实例代码
转载请注明原文链接：Ajax提交Form表单及文件上传的实例代码
