springMVC結(jié)合AjaxForm上傳文件
最近在項(xiàng)目中需要上傳文件文件,之前一直都是form提交的,嘗試了一下AjaxForm,感覺(jué)還比較好用,寫篇隨筆mark下,供以后使用。
準(zhǔn)備工作:
下載jquery-form.js
相關(guān)jar:
commons-fileupload-1.1.1.jar
commons-io-1.3.2.jar
在spring-servlet.xml進(jìn)行multipartResolver配置:
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> <property name="defaultEncoding" value="utf-8" /> <property name="maxUploadSize" value="10485760000" /> <property name="maxInMemorySize" value="40960" /> </bean>
這個(gè)是必須的,否則不好用。
頁(yè)面:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" session="false" %> <html> <!-- - Author(s): xieshuang - Date: 2016-06-20 13:46:20 - Description: --> <head> <title>Title</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <script src="<%=request.getContextPath()%>/common/nui/nui.js" type="text/javascript"></script> <script src="<%=request.getContextPath()%>/common/nui/jquery/jquery-form.js" type="text/javascript"></script> <script type="text/javascript" src="<%=request.getContextPath()%>/page4nui/master/projecttype/js/projecttype_import.js"></script> <script type="text/javascript"> var contextPath="<%=request.getContextPath()%>"; </script> </head> <body> <div id="test" class="nui-fit" style="padding-top:5px;min-width:300px;min-height:180px;"> <form id="fileUpload" method="post" enctype="multipart/form-data"> <div id="dataImport" style="width:100%;overflow:hidden;"> <table style="width:100%;table-layout:fixed;" class="nui-form-table" > <tr> <th align="right" style="width:25%" >選擇文件:</th> <td> <input id="uploadFile" type="file" name="file" style="width:90%;"><font style="color:red;width:5%;"> *</font> </td> </tr> </table> </div> <div style="width:100%;padding-top:10px;" align="center"> <input style="width:60px;" iconCls="icon-ok" value="確定" type="submit" /> <span style="display:inline-block;width:25px;"></span> <a class="nui-button" iconCls="icon-cancel" style="width:60px;" onclick="cancel">取消</a> </div> </form> </div> </body> </html>
核心js:
var msg; $(function(){ nui.parse(); //ajax配置 var options = { url: contextPath+"/webapp/cfProjectType/importExcel", beforeSubmit: showRequest, //提交前處理 success: showResponse, //處理完成 resetForm: true, dataType: 'json' }; $('#fileUpload').submit(function() { //注意 $(this).ajaxSubmit(options); return false;//防止dialog 自動(dòng)關(guān)閉 }); }) //執(zhí)行成功回調(diào)函數(shù) function showResponse(e) { nui.hideMessageBox(msg); if (e.importFlag == true) { CloseWindow("ok"); } else { //對(duì)錯(cuò)誤的一些處理 } } //提交前的一些校驗(yàn) function showRequest(formData, jqForm, options){ if(formData[0].value=="" || formData[0].value==null){ nui.alert("請(qǐng)選擇文件"); return false; } var fileName = $("#uploadFile").val().split("\\").pop(); var strs = new Array(); //定義一數(shù)組 strs = fileName.split('.'); var suffix = strs [strs .length - 1]; if (suffix != 'xls' && suffix != 'xlsx') { nui.alert("請(qǐng)選擇excel文件!"); return false; } msg = nui.loading("Loading", "Please waiting"); }
java代碼:
@SuppressWarnings("unchecked") @RequestMapping("/webapp/cfProjectType/importExcel") @ResponseBody public Map<String, Object> importExcel(@RequestParam("file") MultipartFile[] files, HttpServletRequest request) throws Throwable { //long starttiem = System.currentTimeMillis(); InputStream fis; fis = null; File fileIn = null; try { for (MultipartFile myfile : files) { if (!myfile.isEmpty()) { String realPath = request.getSession().getServletContext().getRealPath("/export"); fileIn = new File(realPath); //判斷上傳文件的保存目錄是否存在 if (!fileIn.exists() && !fileIn.isDirectory()) { //創(chuàng)建目錄 fileIn.mkdirs(路徑); } //將上傳的文件復(fù)制到文件夾下 myfile.transferTo(new File(路徑+文件名)); } } }
這里我之前用過(guò)另外一個(gè)方法FileUtils.copyInputStreamToFile(InputStream arg0, File arg1)同樣能將文件保存到路徑下面
更多精彩內(nèi)容請(qǐng)參考專題《ajax上傳技術(shù)匯總》,《javascript文件上傳操作匯總》和《jQuery上傳操作匯總》進(jìn)行學(xué)習(xí)。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 利用SpringMVC和Ajax實(shí)現(xiàn)文件上傳功能
- SpringMVC+Ajax實(shí)現(xiàn)文件批量上傳和下載功能實(shí)例代碼
- springMVC + easyui + $.ajaxFileUpload實(shí)現(xiàn)文件上傳注意事項(xiàng)
- SpringMVC結(jié)合ajaxfileupload實(shí)現(xiàn)文件無(wú)刷新上傳代碼
- springMVC+ajax實(shí)現(xiàn)文件上傳且?guī)нM(jìn)度條實(shí)例
- SpringMVC結(jié)合ajaxfileupload.js實(shí)現(xiàn)文件無(wú)刷新上傳
- Springmvc加ajax實(shí)現(xiàn)上傳文件并頁(yè)面局部刷新
相關(guān)文章
推薦三款不錯(cuò)的圖片壓縮上傳插件(webuploader、localResizeIMG4、LUploader)
這篇文章主要為大家詳細(xì)介紹了三款不錯(cuò)的圖片壓縮上傳插件,webuploader、移動(dòng)端上傳插件localResizeIMG4以及LUploader)2017-04-04不間斷滾動(dòng)JS打包類,基本可以實(shí)現(xiàn)所有的滾動(dòng)效果,太強(qiáng)了
不間斷滾動(dòng)JS打包類,基本可以實(shí)現(xiàn)所有的滾動(dòng)效果,太強(qiáng)了...2007-12-12Google Suggest ;-) 基于js的動(dòng)態(tài)下拉菜單
Google Suggest ;-) 基于js的動(dòng)態(tài)下拉菜單...2006-10-10ECharts實(shí)現(xiàn)數(shù)據(jù)超出Y軸最大值max但不隱藏
這篇文章主要為大家介紹了ECharts實(shí)現(xiàn)數(shù)據(jù)超出Y軸最大值max但不隱藏實(shí)現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10javascript學(xué)習(xí)基礎(chǔ)筆記之DOM對(duì)象操作
javascript是一種基于對(duì)象和世界驅(qū)動(dòng),并且安全性較強(qiáng)的腳本語(yǔ)言。一個(gè)完整的javascript實(shí)現(xiàn)包括核心(ECMAScript),文檔對(duì)象模型(DOM)和瀏覽器對(duì)象模型(BOM)2011-11-11js實(shí)現(xiàn)rem自動(dòng)匹配計(jì)算font-size的示例
本篇文章主要介紹了js實(shí)現(xiàn)rem自動(dòng)匹配計(jì)算font-size的示例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11