HTML5 AJAX异步提交FORM表单及文件上传
2017-01-10 14:38:44  By: dwtedx

在平时的开发后台管理页面工作中、经常会需要上传图片、于是我就用很普通的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´;

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号(ddblogs)

或者你也可以关注我的新浪微博、了解DD博客的最新动态:DD博客官方微博(dwtedx的微博)

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板(dwtedx的留言板)

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛


快速评论


技术评论

  • 该技术还没有评论、赶快抢沙发吧...
DD记账
top
+