SpringMVC基於zyUpload元件實現上傳
阿新 • • 發佈：2019-01-26
之前公司做一專案 要求需要預覽功能上傳多張圖片，網上查了很多資料，在這個http://www.52doit.com/show/341網站找到了一個html5寫的元件，感覺還不錯，對ie支援不是很好效果還可以。感覺還不錯 就用它了，將他原始碼進行改進哈，搞成自己想要的效果，謝謝這位仁兄的提供。
看效果吧：
頁面需要做的
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <!-- 引用控制層外掛樣式 --> <link rel="stylesheet" href="css/control/css/zyUpload.css" type="text/css"> <link rel="stylesheet" href="css/upload.css" type="text/css"> <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> <!-- 引用核心層外掛 --> <script type="text/javascript" src="js/zyFile.js"></script> <!-- 引用控制層外掛 --> <script type="text/javascript" src="js/zyUpload.js"></script> <!-- 引用初始化JS --> <script type="text/javascript" src="js/demo.js"></script> <script type="text/javascript"> //我這裡使用的是springmvc var pathurl="showtable/web/upload"; $(document).ready(function(){ $('#upload').click(function(){ $('.box2').fadeIn("slow"); }); $('.upload_close').click(function(){ $('.box2').fadeOut("slow"); }); //$('.boxshow').easydrag(); }); </script> </head> <body> <div class="boxshow"> <div class="box2"> <div class="login5"></div> <div class="login51"> <div id="demo" class="demo"></div> </div> </div> </div> <input type="button" value="上傳" id="upload"/> </body> </html>
本人使用的是springmvc 後臺程式碼
@RequestMapping("/web/upload") @ResponseBody public Map<String,Object> webPhotoUpload(HttpServletRequest request) { Msg msg=null; UserInfo user=(UserInfo)request.getSession().getAttribute("user"); //建立一個通用的多部分解析器 CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(request.getSession().getServletContext()); //判斷 request 是否有檔案上傳,即多部分請求 if(multipartResolver.isMultipart(request)){ //轉換成多部分request MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request; // 取得request中的所有檔名 Iterator<String> iter = multiRequest.getFileNames(); while (iter.hasNext()) { // 取得上傳檔案 MultipartFile file = multiRequest.getFile(iter.next()); // 資料封裝操作 MultipartFile reqeust // 取得當前上傳檔案的文 件名稱 <span style="white-space:pre"> </span>String myFileName = file.getOriginalFilename(); //這裡需要你對檔案的處理哦 // logger.debug("圖片上傳：{}", JsonUtil.toString(map)); try { photoAlbumService.insertWebPhotos(map); } catch (Exception e) { return Tools.retMap(Msg.bizMsgIntance(ErrInfo.PHOTO_WALL_UPLOAD_FAIL, ErrInfo.PHOTO_WALL_UPLOAD_FAIL_MSG)); } } } return Tools.retMap(msg); }
下載：http://download.csdn.net/detail/itlqi/8905599這裡沒有包含java程式碼 只要將js/css放入專案中即可