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

 更新时间:2016年10月12日 14:16:50   作者:Jay922  
前段时间在做程序的时候发现一个小问题,在写后台管理上传图片时,在我进行用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>:&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表单及文件上传的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • Ajax入门学习教程(一)

    Ajax入门学习教程(一)

    AJAX(Asynchronous JavaScript And XML)翻译成中文就是“异步Javascript和XML”。下面简单给大家介绍了ajax入门学习知识,需要的的朋友参考下吧
    2017-02-02
  • 无框架 Ajax分页(原创)

    无框架 Ajax分页(原创)

    最近想做一个Ajax的功能,网上一搜几乎全是基于某某框架的Ajax分页,要么需给页面加上<scriptManager></scriptManager>,要么需引入某dll,要么需使用类似于jquery的框架。
    2009-08-08
  • Ajax 跨域如何实现

    Ajax 跨域如何实现

    这篇文章主要介绍了Ajax 跨域如何实现的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下
    2016-05-05
  • pushState、replaceState、onpopstate 实现Ajax页面的前进后退刷新

    pushState、replaceState、onpopstate 实现Ajax页面的前进后退刷新

    这篇文章主要介绍了pushState、replaceState、onpopstate 实现Ajax页面的前进后退刷新的相关资料,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2016-11-11
  • Ajax xmlHttpRequest的status的值的含义

    Ajax xmlHttpRequest的status的值的含义

    虽然常写ajax方面的东西,但是很少去专门了解xmlHttpRequest的status各个值的含义,今天在开发的过程中又遇到了问题,查过资料后,将他人已总结过的转载一下,学习学习。
    2010-03-03
  • JavaScript实现Ajax总结

    JavaScript实现Ajax总结

    ajax应用非常普及,ajax的优点大家都知道,具体就不多说了,其缺点还真不少,比如破坏浏览器的back功能,同一个url打开的界面并不是完全相同,还有安全性能等方面,至于有这么多的缺点,也阻止不了大家使用ajax的步伐,下文给大家分享javascript实现ajax小结吧
    2015-10-10
  • JS AJAX前台如何给后台类的函数传递参数

    JS AJAX前台如何给后台类的函数传递参数

    这篇文章主要介绍了JS AJAX前台给后台类的函数传递参数的方法,下面有个不错的示例,需要的朋友可以参考下
    2014-06-06
  • 将xml文件作为一个小的数据库,进行学生的增删改查的简单实例

    将xml文件作为一个小的数据库,进行学生的增删改查的简单实例

    下面小编就为大家带来一篇将xml文件作为一个小的数据库,进行学生的增删改查的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • 使用ajax和history.pushState无刷新改变页面URL示例

    使用ajax和history.pushState无刷新改变页面URL示例

    这篇文章主要介绍了使用ajax和history.pushState无刷新改变页面URL示例,需要的朋友可以参考下
    2014-10-10
  • Ajax request response 乱码解决方法

    Ajax request response 乱码解决方法

    今天最早遇到一个脱离平台,单独给用户定制开发的关于状态管理的功能局部刷新出现乱码的情况,仔细查了下代码发现并无特殊之处,charset统一使用GB18030,ajax传递参数使用默认UTF-8,对传递的中文信息手动转码。
    2009-05-05

最新评论