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並解析其中的資料，將其轉換為對象存入資料庫，部分資料公司相關，後面就不寫了。

jquery.form.min.js外掛程式的使用執行個體