Ajax提交Form表单及文件上传的实例代码

前几天，发现了一些小问题。我在写后台管理页面时，需要上传一张图片。于是我就用很普通的Form表单上传有一段Json串和图片文件；
Form表单上传图片只需要在<form>标签里加上enctype = "multipart/form-data"，这样是可以上传图片的；
但问题来了，在我进行用Form表单提交的时候直接跳出来提交返回值的页面并且原先的页面刷新；
这样我们可以先到异步的Ajax可以实现局部刷新；
废话不多说了直接上代码；
首先是html：

<form id = "form_insert" method = "post"><table style = "font-size: 13px; margin: 13px auto;"> <tr><td style = "text-align: right;">类型</td><td>:  <input id = "acttype" style = "width:150px" class = "easyui-textbox" data-options = "required:true"></td></tr><tr><td colspan = "2" style = "height: 13px"></td></tr><tr><td style = "text-align: right;">名称</td><td>:  <input id = "actname" style = "width:150px" class = "easyui-textbox" data-options = "required:true"></td></tr><tr><td colspan = "2" style = "height: 13px"></td></tr><tr><td style = "text-align: right;">开始时间</td><td>:  <input id = "actstarttime" style = "width:150px" class = "easyui-datetimebox" data-options = "required:true"></td></tr><tr><td colspan = "2" style = "height: 13px"></td></tr><tr><td style = "text-align: right;">结束时间</td><td>:  <input id = "actendtime" style = "width:150px" class = "easyui-datetimebox" data-options = "required:true"></td></tr><tr><td colspan = "2" style = "height: 13px"></td></tr><tr><td style = "text-align: right;">省</td><td>:  <input id ="mem_Province" style = "width:150px" class = "easyui-combobox" data-options = "required:true"></td></tr><tr><td colspan="2" style="height: 13px"></td></tr><tr><td style="text-align: right;">市</td><td>:  <input id = "mem_City" style = "width:150px" class = "easyui-combobox" data-options = "required:true"></td></tr><tr><td colspan = "2" style = "height: 13px"></td></tr><tr><td style = "text-align: right;">门店</td><td>:  <input id = "mem_Shop" style = "width:150px" class = "easyui-combobox" data-options = "required:true"></td></tr><tr><td colspan="2" style="height: 13px"></td></tr><tr><td style = "text-align: right;">具体地址</td><td>:  <input id = "actadd" style = "width:150px" class = "easyui-textbox" data-options = "required:true"></td></tr></table></form><form id = "form_sub" style = "font-size: 13px;"><table style="font-size: 13px; margin: 13px auto;"><tr><td style = "text-align: right;">上传图片</td><td>:  <input class = "easyui-filebox" name = "photo" style = "width:153px" data-options = "required:true,prompt:"选择上传图片",buttonText:" 选 择 ""></td><td><input type = "text" id = "Item" name = "item" style = "display:none;"></td></tr></table></form><div style = "text-align:right; padding:2px 5px;"><a id = "sub" class = "easyui-linkbutton" data-options = "iconCls:"icon-ok"" href = "javascript:void（0）">保存</a>    <a class = "easyui-linkbutton" data-options = "iconCls:"icon-quxiao"" href = "javascript:void（0）" onclick = "window_open（$（"#insert_form"）, "close"）">取消</a>    </div>

以上是html代码，为了方便大家copy，css直接在标签里了；
有很多朋友想问，为什么写两个form表单；
这是因为根据后台接收数据的需求，传的是信息变成字符串和图片；
首先把信息变成字符串；
再放到第二个Form表单里，细心地朋友发现在第二个form表单里<input>标签里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表单及文件上传的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！