SpringMVC+BUI實現文件上傳（附詳解，源碼下載） · Java工作實用篇

中午有限時間寫這博文，前言就不必多說了，直奔主題吧。 BUI是一個前端框架，關于BUI的介紹請看博主的文章[那些年用過的一些前端框架](http://blog.csdn.net/u013142781/article/details/50590458)。下面我們開始實例的講解！ ### 一、效果演示： ![](https://box.kancloud.cn/2016-03-15_56e77db7c8810.jpg) 上傳成功后，會發現本地相應的sava目錄下多了剛剛上傳的圖片（因為只是一個例子，就保存在本地目錄了）。 ![](https://box.kancloud.cn/2016-03-15_56e77db7ef673.jpg) ### 二、實例講解本實例使用的環境，eclipse + maven。? 使用的技術：SpringMVC + BUI。關于Spring和SpringMVC的配置，這里就不多說明了。最后會提供源碼下載，猿友們自行下載即可看到所有配置文件和代碼。 SpringMVC想要實現上傳文件，還需要添加如下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> <dependency> <groupId>tomcat</groupId> <artifactId>catalina-manager</artifactId> <version>5.5.23</version> </dependency> ~~~ 另外還需要在spring-mvc.xml文件里面添加bean： ~~~  <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"/> ~~~ 下面是直接上controller代碼： ~~~ package com.luo.controller; import java.io.File; import java.io.FileOutputStream; import java.io.IOException; import java.util.Map; import javax.servlet.http.HttpServletRequest; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.bind.annotation.ResponseBody; import org.springframework.web.multipart.MultipartFile; import org.springframework.web.multipart.MultipartHttpServletRequest; import org.springframework.web.servlet.ModelAndView; @Controller public class UserController { private final String SAVE_DIR = "C:/Users/luoguohui/Desktop/save/"; @RequestMapping("/index.jhtml") public ModelAndView getIndex(HttpServletRequest request) throws IOException { ModelAndView mav = new ModelAndView("index"); return mav; } @RequestMapping(value="/uploadFlie.json", method=RequestMethod.POST) @ResponseBody public String uploadFlie(HttpServletRequest request) throws IOException { MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request; Map<String, MultipartFile> fileMap = multipartRequest.getFileMap(); String fileName = null; for (Map.Entry<String, MultipartFile> entity : fileMap.entrySet()) { MultipartFile myfile = entity.getValue(); fileName = myfile.getOriginalFilename(); byte[] bs = myfile.getBytes(); File file = new File(SAVE_DIR + fileName); FileOutputStream fos = new FileOutputStream(file); fos.write(bs); fos.close(); } return "{\"url\" : \"" + SAVE_DIR + fileName + "\"}"; } } ~~~ 上面的代碼就不作過多的解釋的了，基本一看就懂，就是把獲取到的上傳的文件放到如下目錄： ~~~ C:/Users/luoguohui/Desktop/save/ ~~~ 下面上前端代碼： ~~~ <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <html> <head> <link href="<%=request.getContextPath()%>/static/bui/css/dpl-min.css" rel="stylesheet"> <link href="<%=request.getContextPath()%>/static/bui/css/bui-min.css" rel="stylesheet"> <script src="<%=request.getContextPath()%>/static/bui/js/jquery-1.8.1.min.js"></script> <script src="<%=request.getContextPath()%>/static/bui/js/bui-min.js"></script> <script src="<%=request.getContextPath()%>/static/bui/js/layout-min.js"></script> <script src="<%=request.getContextPath()%>/static/bui/js/uploader-min.js"></script> </head> <body> <div class="demo-content" style="margin:20px;"> <div class="row"> <div class="span8"> <div id="J_Uploader"> </div> </div> </div> </body> <script type="text/javascript"> // http://120.26.80.109/demo/uploader.php#uploader/checkSuccess.php BUI.use('bui/uploader',function (Uploader) { /** * 返回數據的格式 * 默認是 {url : 'url'},否則認為上傳失敗 * 可以通過isSuccess 更改判定成功失敗的結構 */ var uploader = new Uploader.Uploader({ render: '#J_Uploader', url: '<%=request.getContextPath()%>' + '/uploadFlie.json', rules: { //文的類型 ext: ['.png,.jpg','文件類型只能為{0}'], //上傳的最大個數 max: [1, '文件的最大個數不能超過{0}個'], //文件大小的最小值,這個單位是kb minSize: [10, '文件的大小不能小于{0}KB'], //文件大小的最大值,單位也是kb maxSize: [2048, '文件大小不能大于2M'] }, //根據業務需求來判斷上傳是否成功 isSuccess: function(result){ if(result && result.url){ BUI.Message.Alert("上傳成功,文件已保存到目錄：" + result.url); }else{ BUI.Message.Alert("上傳失敗"); } } }).render(); }); </script> </html> ~~~ 上面的代碼主要是使用了BUI的上傳文件功能，記得需要導入uploader-min.js才能上傳哦，另外對上傳的文件數量，格式，大小作了一些設置。 ### 三、源碼下載 [http://download.csdn.net/detail/u013142781/9421985](http://download.csdn.net/detail/u013142781/9421985) 下載源碼，項目跑起來之后訪問如下url即可跳轉到文件上傳頁面： ~~~ http://localhost:8080/first_maven_project/index.jhtml ~~~ 時間有限，就介紹到這里了，如有什么不明白的地方，歡迎私信或評論交流。