abstract:這里就簡單介紹下ajaxFileUpload,jQuery插件AjaxFileUpload可以實現(xiàn)ajax文件上傳。我們的項目采用的是jsp跟js分離的架構(gòu),所以代碼如下。首先是jsp部分:<!-- <form method="post"> --> <input 
這里就簡單介紹下ajaxFileUpload,jQuery插件AjaxFileUpload可以實現(xiàn)ajax文件上傳。我們的項目采用的是jsp跟js分離的架構(gòu),所以代碼如下。
首先是jsp部分:
<!-- <form method="post"> --> <input type="file" name="n_file" id="fileToUpload" value="上傳表格" /> <button id="upload1" class="btn btn-default">上傳</button> <!-- </form> -->
這里說下 為什么把form注釋了,因為我的jsp中已經(jīng)有了另外一個form 在調(diào)試過程中發(fā)現(xiàn)可能有沖突就把form注釋了,事實證明ajaxFileUpload 不用form表單一樣可以提交,下面就是js代碼部分:
$(function(){ //點擊打開文件選擇器 $("#upload1").on('click', function() { //選擇文件之后執(zhí)行上傳 $.ajaxFileUpload({ url:'supplyDataReportUploadExcel', //url自己寫 secureuri:false, //這個是啥沒啥用 type:'post', fileElementId:'fileToUpload',//file標(biāo)簽的id dataType: 'json',//返回數(shù)據(jù)的類型 //data:{name:'logan'},//一同上傳的數(shù)據(jù) success: function (data, status) { // alert(data); // alert(data.msg); // alert(data.success); if(data.success){ alert("upload,success!!!"); window.location.href='supplyDataReport'; }else{ alert(data.msg); window.location.href='supplyDataReport'; } }/*, error: function (data, status, e) { alert(e); }*/ }); }); });
本人js不好,只是會用這個js不能完全copy走,要結(jié)合項目結(jié)構(gòu)的實際情況,不過大體參數(shù)干什么的注釋都寫了。一定注意type是post跟請求對應(yīng)的Controller的方法的method=RequestMethod.POST 一致。注意dataType:'json' ,一定注意json的大小寫。
ps:這里要說一下我用的data.success做的判斷跟后面的一個實體類AjaxJson有關(guān)系,注意?。。。?!
對了 jsp中還需要引入 對應(yīng)的js如下:
<script type="text/javascript">Core.js('./js/iface/upload');</script> <script type="text/javascript" src="libs/jquery/ajaxfileupload.js"></script>
第一段引入的upload 就是上面js的內(nèi)容,我們的引入js已經(jīng)被封裝好了,所以直接寫那就行,具體結(jié)合實際情況 ,下面的要用到的jQuery插件AjaxFileUpload的js文件。
接下來是Controller方法如何相應(yīng):
@SuppressWarnings("resource") @RequestMapping(value = "/supplyDataReportUploadExcel", method = RequestMethod.POST) public @ResponseBody String supplyDataReportUploadExcel(HttpServletRequest request, HttpServletResponse response,MultipartFile n_file) throws Exception { AjaxJson json = new AjaxJson(); ObjectMapper mapper = new ObjectMapper(); UploadFormBackVo uploadFormBackVo = new UploadFormBackVo(); //判斷是否是空的Excel 包括沒有標(biāo)題 if(n_file.getSize()>0){ try{ //先判斷 文件名 是否符合規(guī)格 因為不知道怎么獲取上傳文件的路徑 后期修改 //獲取文件 //驗證文件名 String fileName = n_file.getOriginalFilename(); String fileNewName = fileName.replaceAll(".xls", ""); String eL = "[a-zA-Z]+[0-9]{4}-[0-9]{2}-[0-9]{2}"; Pattern p = Pattern.compile(eL); Matcher m = p.matcher(fileNewName); boolean dateFlag = m.matches(); if (!dateFlag) { System.out.println("格式錯誤"); uploadFormBackVo.setFormName(n_file.getOriginalFilename()); uploadFormBackVo.setUploadTime(new Date()); uploadFormBackVo.setIfsuccess("上傳失敗,Excel文件名不符合規(guī)格?。?!"); supplyDataReportService.INSERT(uploadFormBackVo); json.setSuccess(false); json.setMsg("Excel,NameError!!!"); String jsonStr = mapper.writeValueAsString(json); return jsonStr; } //上傳文件 UploadUtil.SaveFileFromInputStream(n_file.getInputStream(), "D:/補數(shù)據(jù)報表文件", n_file.getOriginalFilename()); InputStream is2 = new FileInputStream("D:/補數(shù)據(jù)報表文件/"+n_file.getOriginalFilename()); //讀取文件進行內(nèi)容驗證 ExcelReader excelReader = new ExcelReader(); Map<Integer, SupplyDataReportBackVo> supplyDataReportBackVos = new HashMap<Integer, SupplyDataReportBackVo>(); String jsonStr = excelReader.readExcelContent(is2,supplyDataReportBackVos,json,n_file); //判斷 readExcelContent()解析Excel文件 是否符合規(guī)范 如果符合 修改相應(yīng)數(shù)據(jù) if(json.isSuccess()==true){ //遍歷map 用value --》SupplyDataReportBackVo 調(diào)用 UPDATEById方法 for(SupplyDataReportBackVo supplyDataReportBackVo : supplyDataReportBackVos.values()){ supplyDataReportService.UPDATEById(supplyDataReportBackVo); } System.out.println("獲得Excel表格的內(nèi)容:"); for (int i = 1; i <= supplyDataReportBackVos.size(); i++) { System.out.println(supplyDataReportBackVos.get(i)); } //保存上傳記錄 uploadFormBackVo.setFormName(n_file.getOriginalFilename()); uploadFormBackVo.setUploadTime(new Date()); uploadFormBackVo.setIfsuccess("上傳成功"); supplyDataReportService.INSERT(uploadFormBackVo); return jsonStr; } // 解析Excel 文件 中 有空值 保存這次上傳的記錄且刪除已上傳的Excel文件, 刪除已上傳的Excel文件已在 readExcelContent()中處理 uploadFormBackVo.setFormName(n_file.getOriginalFilename()); uploadFormBackVo.setUploadTime(new Date()); uploadFormBackVo.setIfsuccess("上傳失敗,Excel中有空值!??!"); supplyDataReportService.INSERT(uploadFormBackVo); return jsonStr; } catch (IOException e){ System.out.println(e.getMessage()); } }else{ //ajax返回的數(shù)據(jù) json.setSuccess(false); json.setMsg("Upload File Null!!!!!"); String jsonStr = mapper.writeValueAsString(json); return jsonStr; } System.out.println("ajax請求成功"); return ""; / json.setMsg("upload,success!!!"); }
這個方法注意幾個地方就行,其他的都是樓主本人自身的業(yè)務(wù)邏輯,第一@RequestMapping中請求的方式為POST,第二傳入的參數(shù)有個MultipartFile n_file,這個n_file要跟jsp中的<input>標(biāo)簽中name屬性對應(yīng)。第三要注意返回值Sting上的一個注解@ResponseBody,剩下兩個需要注意的地方就是AjaxJson,ObjectMapper。
AjaxJson是自己封裝的一個model類,用來處理ajax的,至于ObjectMapper是用來轉(zhuǎn)換類型的具體的自己百度或者腦補吧,樓主也緊緊限于會用。下面貼上AjaxJson:
package com.zhongxin.web.ops.adrule.model; import java.util.Map; public class AjaxJson { private boolean success = true; private String msg = "ok"; private Object obj = null; private Map<String, Object> attributes; public boolean isSuccess() { return success; } public void setSuccess(boolean success) { this.success = success; } public String getMsg() { return msg; } public void setMsg(String msg) { this.msg = msg; } public Object getObj() { return obj; } public void setObj(Object obj) { this.obj = obj; } public Map<String, Object> getAttributes() { return attributes; } public void setAttributes(Map<String, Object> attributes) { this.attributes = attributes; } }
更多關(guān)于解析ajaxFileUpload 異步上傳文件簡單使用請關(guān)注PHP中文網(wǎng)(ipnx.cn)其他文章!