因?yàn)楣具€在使用老版本的layui,文件上傳在新版本中全部重寫(xiě)了,這里記錄下老版本layui的文件上傳。
成都網(wǎng)站制作、成都網(wǎng)站建設(shè)、外貿(mào)營(yíng)銷網(wǎng)站建設(shè),成都做網(wǎng)站公司-創(chuàng)新互聯(lián)建站已向上千多家企業(yè)提供了,網(wǎng)站設(shè)計(jì),網(wǎng)站制作,網(wǎng)絡(luò)營(yíng)銷等服務(wù)!設(shè)計(jì)與技術(shù)結(jié)合,多年網(wǎng)站推廣經(jīng)驗(yàn),合理的價(jià)格為您打造企業(yè)品質(zhì)網(wǎng)站。
前端代碼:(引入layui相關(guān)包)
這里可以參考layui官方文檔,有一點(diǎn)需要注意,name屬性是必需的,當(dāng)你選擇好文件后,name屬性的值,會(huì)在后臺(tái)被相應(yīng)的參數(shù)接收。
如果你只寫(xiě)了上面的代碼,會(huì)發(fā)現(xiàn)文件上傳的按鈕消失了。這很正常,因?yàn)榭蚣芫褪沁@么設(shè)計(jì)的。
layui.upload({ url: '/pay_channel/upload' ,before: function(input){ //返回的參數(shù)item,即為當(dāng)前的input DOM對(duì)象 $(input).after(''); //layer.msg('文件上傳中',{zIndex:20180509}); } ,success: function(res){ if(res.code == 'success'){ layer.msg(res.message,{zIndex:20180510}); certLocalPath = res.filePath }else{ layer.msg(res.message,{zIndex:20180510}); } } });
url是請(qǐng)求地址,必須是AJAX請(qǐng)求(POST),必須返回JSON,返回的數(shù)據(jù)在success中操作,以上代碼簡(jiǎn)單易懂,不用照抄。
before是指在上傳請(qǐng)求進(jìn)行之前,進(jìn)行的一些操作,$(input).after('');這段代碼是為了追加一個(gè)參數(shù),參數(shù)名字位mchId-file,值為11111,所以后端接收會(huì)有兩個(gè)參數(shù),file和mchId-file。
后端代碼:
@RequestMapping("/upload") @ResponseBody public String importFile(MultipartFile file, HttpServletRequest request) { JSONObject object = new JSONObject(); try { String mchId = request.getParameter("mchId-file"); String originalFilename = file.getOriginalFilename(); // String dirPath = System.getProperty("user.dir")+"/wx"; // String dirPath = this.getClass().getClassLoader().getResource("").getPath()+"wx"; String dirPath = "/xxxx/java/pay/wx/cert"; _log.info("證書(shū)上傳的文件目錄{}", dirPath); String filePath = "/"+mchId+"_"+originalFilename; boolean b = new File(dirPath).mkdirs(); file.transferTo(new File(dirPath + filePath).getAbsoluteFile()); object.put("filePath", filePath); object.put("code", "success"); object.put("message", "文件上傳成功"); } catch (IOException e) { e.printStackTrace(); object.put("code", "fail"); object.put("message", "文件上傳失敗"); } return object.toJSONString(); }
獲得的file是MultipartFile類對(duì)象,org.springframework.web.multipart.MultipartFile
該對(duì)象可以獲取文件名字getOriginalFilename,獲取文件流getInputStream,傳輸?shù)搅硪粋€(gè)文件的方法transferTo等。
以上后端方法是將獲取到的文件,保存到另一個(gè)特別目錄中去。
再說(shuō)幾句題外話:
String dirPath = System.getProperty("user.dir");//獲取項(xiàng)目地址根目錄,就是說(shuō)你workspace中,該項(xiàng)目初始目錄。
String dirPath = this.getClass().getClassLoader().getResource("").getPath();//獲取項(xiàng)目resource目錄位置,即springboot中application.yml所在文件夾。
再windows中其實(shí)不需要寫(xiě)盤(pán)符來(lái)表示這個(gè)目錄的絕對(duì)路徑,String dirPath = "/xxxx/java/pay/wx/cert";如果你項(xiàng)目在D盤(pán),那絕對(duì)路徑就會(huì)變成D:/xxxx/java/pay/wx/cert,這樣就避免了服務(wù)器windows與linux的問(wèn)題。
但有一點(diǎn)要注意:File file = new File(dirPath + filePath).getAbsoluteFile(),如果使用/開(kāi)頭,需要用getAbsoluteFile()獲取到D:/xxxx/java/pay/wx/cert路徑的文件對(duì)象。
以上這篇layui(1.0.9)文件上傳upload,前后端的實(shí)例代碼就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持創(chuàng)新互聯(lián)。