因?yàn)轫?xiàng)目中需要達(dá)到效果：前臺(tái)點(diǎn)擊按鈕彈出文件選擇框，選擇文件確定之后，上傳到后臺(tái)對(duì)文件進(jìn)行處理并給出響應(yīng)信息。

嘗試過(guò)使用$.post，$.ajsx，將表單序列化之后傳到后臺(tái)，但是后臺(tái)并不能收到文件，查找資料后得知：

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

后面使用了Jquery.form插件來(lái)完成了該功能。

前臺(tái)：

1.導(dǎo)入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.設(shè)置按鈕和隱藏表單

<a class="btn btn-small btn-success" onclick="javascript:inportAdvertiserList();">導(dǎo)入</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>

這里按鈕是超鏈接改變樣式來(lái)實(shí)現(xiàn)按鈕，普通按鈕也可以。div默認(rèn)位隱藏

3.對(duì)應(yīng)的js函數(shù)

<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("出錯(cuò)");//msg.errCode }})}</script>

這里注意Id選擇器和input的name（后臺(tái)取值會(huì)用到），url位后臺(tái)地址

?

后臺(tái)：

@RequestMapping(value = {"inportAdvertiserList"})public@ResponseBodyErrorMsg inportAdvertiserList(MultipartFile excelFile, ModelAndView model,HttpServletRequest request, HttpServletResponse response){String[] tableHander = {"平臺(tái)", "賬戶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); }

后臺(tái)是ssm構(gòu)建的，

@RequestMapping(value = {"inportAdvertiserList"})用來(lái)設(shè)置請(qǐng)求url, @ResponseBody用來(lái)標(biāo)記返回指，可以將返回值轉(zhuǎn)換成json數(shù)據(jù)返回（需要導(dǎo)入相關(guān)包）。
后臺(tái)可以MultipartFile excelFile來(lái)取到前臺(tái)input傳過(guò)來(lái)的file

這次項(xiàng)目中是需要取到前臺(tái)傳過(guò)來(lái)的excel并解析其中的數(shù)據(jù)，將其轉(zhuǎn)換為對(duì)象存入數(shù)據(jù)庫(kù)，部分?jǐn)?shù)據(jù)公司相關(guān)，后面就不寫了。

轉(zhuǎn)載于:https://www.cnblogs.com/LeoBoy/p/5831302.html

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。