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

嘗試過使用$.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@ResponseBodyErrorMsg 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并解析其中的數據，將其轉換為對象存入數據庫，部分數據公司相關，后面就不寫了。

轉載于:https://www.cnblogs.com/LeoBoy/p/5831302.html

總結

以上是生活随笔為你收集整理的异步提交表单插件jquery.form.min.js的使用实例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。