您当前的位置:首页 > 网站建设 > ajax
| php | asp | css | H5 | javascript | Mysql | Dreamweaver | Delphi | 网站维护 | 帝国cms | React | 考试系统 | ajax | jQuery | 小程序 |

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

51自学网 2022-02-21 10:53:03
  ajax

前几天,发现了一些小问题。我在写后台管理页面时,需要上传一张图片。于是我就用很普通的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>:&nbsp;&nbsp;<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>:&nbsp;&nbsp;<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>:&nbsp;&nbsp;<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>:&nbsp;&nbsp;<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>:&nbsp;&nbsp;<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>:&nbsp;&nbsp;<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>:&nbsp;&nbsp;<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>:&nbsp;&nbsp;<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>:&nbsp;&nbsp;<input class = "easyui-filebox" name = 'photo' style = "width:153px" data-options = "required:true,prompt:'选择上传图片',buttonText:'&nbsp;选&nbsp;择&nbsp;'"></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>&nbsp;&nbsp;&nbsp;&nbsp;<a class = "easyui-linkbutton" data-options = "iconCls:'icon-quxiao'" href = "javascript:void(0)" onclick = "window_open($('#insert_form'), 'close')">取消</a>&nbsp;&nbsp;&nbsp;&nbsp;</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表单及文件上传的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对51zixue.net网站的支持!


下载地址:
ajax跨页面提交表单
Ajax向后台传json格式的数据出现415错误的原因分析及解决方法
万事OK自学网:51自学网_软件自学网_CAD自学网自学excel、自学PS、自学CAD、自学C语言、自学css3实例,是一个通过网络自主学习工作技能的自学平台,网友喜欢的软件自学网站。