1、前臺頁面： 引入js和css

全選復制放進筆記<link type="text/css" rel="stylesheet" href="<%=basePath%>static/js/uploadifive/uploadifive.css" /> <script type="text/javascript" src="<%=basePath%>static/js/uploadifive/jquery.min.js"></script> <script type="text/javascript" src="<%=basePath%>static/js/uploadifive/jquery.uploadifive.min.js"></script>

2、控件初始化：

全選復制放進筆記<script type="text/javascript">$(function() {$('#file_upload').uploadifive({'auto' : false,'buttonClass': 'btn btn-primary','buttonText': "選擇文件",'queueID' : 'uploadqueue','uploadScript' : '/tools/uploadfiles','onUploadComplete' : function(file, data) { console.log(data); }});}); </script>

3、body頁面內容：

全選復制放進筆記<div id="uploadqueue"> <input id="file_upload" name="file_upload" type="file" multiple="true"> <a href="javascript:$('#file_upload').uploadifive('upload')">上傳文件</a> |<a href="javascript:$('#file_upload').uploadifive('stop')">停止上傳!</a> </div>

4、后臺Controller:

全選復制放進筆記@RequestMapping(value = "/uploadfiles")@ResponseBodypublic JSONArray uploadFile(HttpServletRequest request){Calendar calendar=Calendar.getInstance();List<String> filePathList = new ArrayList<String>();String filePath= SysConstant.UPLOADPATH;String filePathUrl=SysConstant.UPLOADPATHURL+"/"+calendar.get(Calendar.YEAR)+calendar.get(Calendar.MONTH);filePath=filePath+File.separatorChar+calendar.get(Calendar.YEAR)+calendar.get(Calendar.MONTH);try {filePathList = FileUploadUtil.uploadFile(request, filePath,filePathUrl);} catch (FileNotFoundException e) {// TODO Auto-generated catch blocke.printStackTrace();} catch(Exception ex){ex.printStackTrace();}if(filePathList.size() == 0){//return "系統錯誤";}return JSONArray.fromObject(filePathList);}

5、上傳類FileUploadUtil.java

全選復制放進筆記public class FileUploadUtil {private static final Logger log = LoggerFactory.getLogger(FileUploadUtil.class);public static List<String> uploadFile(HttpServletRequest request, String filePath,String filePathUrl) throws FileNotFoundException {List<String> filePathList = new ArrayList<String>();MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;Map<String, MultipartFile> fileMap = multipartRequest.getFileMap();String fileName = null;for (Map.Entry<String, MultipartFile> entity : fileMap.entrySet()) {MultipartFile mf = entity.getValue();fileName = mf.getOriginalFilename();String newfilepath;newfilepath = filePath + File.separatorChar + fileName;System.out.println("newfilepath=" + newfilepath);File dest = new File(filePath);if (!dest.exists()) {dest.mkdirs();}File uploadFile = new File(newfilepath);if (uploadFile.exists()) {uploadFile.delete();}try {log.info("start upload file: " + fileName);FileCopyUtils.copy(mf.getBytes(), uploadFile);} catch (IOException e) {// TODO Auto-generated catch block// e.printStackTrace();log.info("upload failed. filename: " + fileName + e.getMessage());return null;}filePathList.add(filePathUrl+"/"+fileName);}return filePathList;} }

6、配置spring-mvc.xml文件：

全選復制放進筆記<!-- 文件上傳表單的視圖解析器 --> <bean id="multipartResolver"class="org.springframework.web.multipart.commons.CommonsMultipartResolver"><!-- set the max upload size100MB --><property name="maxUploadSize"><value>104857600</value></property><property name="maxInMemorySize"><value>4096</value></property></bean>

7、需要增加的jar文件：

全選復制放進筆記<dependency><groupId>commons-fileupload</groupId><artifactId>commons-fileupload</artifactId><version>1.3.1</version></dependency><dependency><groupId>commons-io</groupId><artifactId>commons-io</artifactId><version>2.4</version></dependency>

總結：這次上傳花了一點時間，遇到幾個小問題。所以留下來供大家參考。

總結

以上是生活随笔為你收集整理的Spring mvc,uploadifive 文件上传实践（转自：https://segmentfault.com/a/1190000004503262）的全部內容，希望文章能夠幫你解決所遇到的問題。

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