異步提交表單插件jquery.form.min.js的使用實例

因為項目中需要達到效果：前台點擊按鈕彈出文件選擇框，選擇文件確定之后，上傳到后台對文件進行處理並給出響應信息。

嘗試過使用$.post，$.ajsx，將表單序列化之后傳到后台，但是后台並不能收到文件，查找資料后得知：

.serialize()序列化表單，提交按鈕的值不會被序列化。另外，如果想要一個表單元素的值被序列化成字符串，這個元素必須含有 name 屬性。此外，復選框（checkbox）和單選按鈕（radio）(input類型為 "radio" 或 "checkbox")的值只有在被選中時才會被序列化。另外，文件選擇元素的數據也不會被序列化。

后面使用了Jquery.form插件來完成了該功能。

前台：

1.導入jquery.min.js和jquery.form.min.js

<script type="text/javascript" src="${ctxStatic}/js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="${ctxStatic}/js/jquery.form.min.js"></script>

2.設置按鈕和隱藏表單

 <a class="btn btn-small btn-success" onclick="javascript:inportAdvertiserList();">導入</a>

<div style="display: none">
      <form class="form-inline" id="uploadexcel" name="uploadexcel" action="" method="post" style="padding-bottom: 10px;" enctype="multipart/form-data">
        <input type="file" name="excelFile" id="excelFile" onchange="javascript:submitexcelFile()">
      </form>
    </div>

這里按鈕是超鏈接改變樣式來實現按鈕，普通按鈕也可以。div默認位隱藏

3.對應的js函數

<script type="text/javascript">

 function inportAdvertiserList()
  {
    $("#excelFile").click();
  }

  function submitexcelFile()
  {

    $("#uploadexcel").ajaxSubmit({
      url: "${ctx}/advertiser/inportAdvertiserList",
      type: "post",
      enctype: 'multipart/form-data',
      // iframe: true,
      dataType:'json',
      success: function (data)
      {
        //var msg = eval(data);
        alert(data.errMsg);
        window.location.reload();
      },
      error: function (data)
      {
        //var msg = eval(data);
        alert("出錯");//msg.errCode
      }
    })
  }

</script>

這里注意Id選擇器和input的name（后台取值會用到），url位后台地址

 

后台：

@RequestMapping(value = {"inportAdvertiserList"})
    public
    @ResponseBody
    ErrorMsg inportAdvertiserList(MultipartFile excelFile, ModelAndView model,
                                  HttpServletRequest request, HttpServletResponse response)
    {
        String[] tableHander = {"平台", "賬戶ID", "賬戶名稱", "是否ROI賬戶", "客戶名稱", "銷售人員"};
        String[] fileNames = {"platformName", "advertiser_id", "corporation_name", "roi", "customerName", "solder.name"};
        List<Object> list = null;

list = ExcelUtil.readExcel(excelFile, Advertiser.class, tableHander, fileNames);

}

后台是ssm構建的，

@RequestMapping(value = {"inportAdvertiserList"})用來設置請求url,

 @ResponseBody用來標記返回指，可以將返回值轉換成json數據返回（需要導入相關包）。
后台可以MultipartFile excelFile來取到前台input傳過來的file

這次項目中是需要取到前台傳過來的excel並解析其中的數據，將其轉換為對象存入數據庫，部分數據公司相關，后面就不寫了。