依賴的環境: springmvc(詳細配置不細說, 只說和上傳有關的部分 ), jquery和相關的上傳控件(點擊下載, 不要積分)

?

后臺部分:

springmvc 文件上傳解析器配置(必須配置), IO異常配置(可選, 不是必須的)

?

<!-- 文件上傳解析器 --><bean id="multipartResolver"class="org.springframework.web.multipart.commons.CommonsMultipartResolver"><!-- 默認編碼 --><property name="defaultEncoding"><value>UTF-8</value></property><property name="maxUploadSize"><!-- 最大1MB 1024*1024 --><value>1048576</value></property><!-- 對上傳的文件開啟懶解析, controller中可以 --><property name="resolveLazily" value="true" /></bean><!-- SpringMVC在超出上傳文件限制時，會拋出org.springframework.web.multipart.MaxUploadSizeExceededException --> <!-- 該異常是SpringMVC在檢查上傳的文件信息時拋出來的，而且此時還沒有進入到Controller方法中 --> <bean id="exceptionResolver" class="org.springframework.web.servlet.handler.SimpleMappingExceptionResolver"><property name="exceptionMappings"><props><!-- 遇到MaxUploadSizeExceededException異常時，自動跳轉到/WEB-INF/jsp/error_fileupload.jsp頁面 --> <prop key="org.springframework.web.multipart.MaxUploadSizeExceededException">error_upload</prop></props></property></bean>

?

controller中接收上傳文件方法, 此處將文件統一保存到 ?項目/upload ?目錄下, 同時返回 ?uuid1.jpg!uuid2.png! ? ? 此種格式的字符串, 每個文件名用" ! " 分隔開, , 最后一個" ! " 不可少方便前臺分割, 截取等操作.

?

?

import java.io.File; import java.io.FileInputStream; import java.io.FileNotFoundException; import java.io.FileOutputStream; import java.io.IOException; import java.io.InputStream; import java.io.PrintWriter; import java.util.HashMap; import java.util.Iterator; import java.util.Map;import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse;import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.beans.factory.annotation.Value; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.ExceptionHandler; 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.MaxUploadSizeExceededException; import org.springframework.web.multipart.MultipartFile; import org.springframework.web.multipart.MultipartHttpServletRequest;/*** 文件處理控制器controller* * @author yufu* @email ilxly01@126.com 2015-7-15*/ @Controller @RequestMapping(value = "/security/filegags") public class FilegagsController {private static final Logger log = LoggerFactory.getLogger(FilegagsController.class);// 上傳文件最大值@Value("${LoadUpFileMaxSize}")String LoadUpFileMaxSize;// 上傳文件保存路徑@Value("${uploadPath}")String uploadPath;/*** 多文件上傳接收方法* * @param request* @return* @throws IOException*/@RequestMapping(value = "/upload", method = RequestMethod.POST)@ResponseBodypublic Map<String, String> aadd_worker(MultipartHttpServletRequest multipartRequest,HttpServletResponse response) throws IOException {response.setContentType("text/html;charset=utf-8");String result = "success!";Map<String, String> map = new HashMap<String, String>();// 1-獲取多個文件for (Iterator it = multipartRequest.getFileNames(); it.hasNext();) {// a-將讀取到的單個文件保存到服務器的 uploadPath 路徑下String key = (String) it.next(); // 文件名log.info("key: " + key);MultipartFile multipartFile = multipartRequest.getFile(key); // 根據key得到文件if (multipartFile.getOriginalFilename().length() > 0) {String originalFileName = multipartFile.getOriginalFilename();// b-截取后綴, 重命名文件, 使用uuid+后綴的方式命名保存到服務器上的文件String suffix = originalFileName.substring(originalFileName.lastIndexOf("."));log.info("文件后綴: " + suffix);// KitService.getUUID() 為自己寫的自動生成一個UUID方法, 您可以自己寫String fileName = KitService.getUUID() + suffix;log.info("新文件名: " + fileName);try {String uploadFileUrl = multipartRequest.getSession().getServletContext().getRealPath(uploadPath);log.info("保存文件路徑: " + uploadFileUrl);// c- 將文件保存到目標目錄下File uploadFile = saveFileFromInputStream(multipartFile.getInputStream(), uploadFileUrl,fileName);if (uploadFile.exists()) {log.info(originalFileName + "上傳成功");} else {log.info(originalFileName + "上傳失敗");throw new FileNotFoundException("file write fail: "+ fileName);}} catch (Exception e) {// TODO Auto-generated catch blocklog.info(originalFileName + "上傳失敗");e.printStackTrace();}result += fileName + Constants.STRING_SPILIT;}}// response.getWriter().write(result);map.put("notice", result);return map;}/*** 上傳圖片超出最大值時, 彈出的異常* * @param ex* @param request* @return* @throws IOException*/@ExceptionHandler(Exception.class)public void handlerException(Exception ex, HttpServletRequest request,HttpServletResponse response) throws IOException {response.setContentType("text/html;charset=utf8");String notice = "error";if (ex instanceof MaxUploadSizeExceededException) {notice = "文件大小不超過"+ getFileMB(((MaxUploadSizeExceededException) ex).getMaxUploadSize());} else {notice = "上傳文件出現錯誤,錯誤信息:" + ex.getMessage();}PrintWriter writer = response.getWriter();writer.write(notice);}/*** 字節轉為MB 方法* * @param byteFile* @return*/private String getFileMB(long byteFile) {if (byteFile == 0) {return "0MB";}long mb = 1024 * 1024;return "" + byteFile / mb + "MB";}// 保存文件到指定路徑private File saveFileFromInputStream(InputStream stream, String path,String filename) {// 檢查保存上傳文件的文件夾是否存在File dirFile = new File(path);if (!dirFile.exists()) {dirFile.mkdir();}File file = null;FileOutputStream fs = null;try {file = new File(path + "/" + filename);fs = new FileOutputStream(file);byte[] buffer = new byte[1024 * 1024];int bytesum = 0;int byteread = 0;while ((byteread = stream.read(buffer)) != -1) {bytesum += byteread;fs.write(buffer, 0, byteread);fs.flush();}fs.close();stream.close();} catch (FileNotFoundException e) {// TODO Auto-generated catch blocke.printStackTrace();} catch (IOException e) {// TODO Auto-generated catch blocke.printStackTrace();} finally {try {if (fs != null) {fs.close();}if (stream != null) {stream.close();}} catch (IOException e) {// TODO Auto-generated catch blocke.printStackTrace();}}return file;}}

前臺部分:

?

html代碼

?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <%@page contentType="text/html" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <c:set var="contextPath" value="${pageContext.request.contextPath}" /> <html xmlns="http://www.w3.org/1999/xhtml"> <head><title>自定義帶縮略圖的文件上傳</title><!-- 上傳圖片 begin, 可從本文章最頂部下載 --><link rel="stylesheet" type="text/css" href="${contextPath}/js/lib/diyUpload/css/webuploader.css" /><link rel="stylesheet" type="text/css" href="${contextPath}/js/lib/diyUpload/css/diyUpload.css" /><!-- 此css樣式在本頁中 --><link rel="stylesheet" type="text/css" href="${contextPath}/css/cs.css" /><script type="text/javascript" src="${contextPath}/js/jquery-1.8.0.min.js"></script><script type="text/javascript" src="${contextPath}/js/lib/diyUpload/js/webuploader.html5only.min.js"></script><script type="text/javascript" src="${contextPath}/js/lib/diyUpload/js/diyUpload.js"></script><!-- 上傳圖片 end, 可從本文章最頂部下載 --><!-- 此腳本為抽取出來的上傳腳本, 可自定義. --><script type="text/javascript" src="${contextPath}/js/lib/diyUpload/cs-belong.js"></script> </head> <body><!-- 預覽可能已經存在的圖片的div -->執照掃描件:<div id="fileBlShow"></div><!-- 上傳按鈕 --><div id="fileBlUpload"></div><!-- 保存實際圖片名字符串的隱藏域 , value值是從后臺傳遞過來的, 例如上文所說的 uuid1.jpg!uuid2.png! 此種格式的字符串, 每個文件名用" ! " 分隔開, 最后一個" ! " 不可少--><input type="hidden" id="fileBl" name="fileBl" value="uuid1.jpg!uuid2.png!" /><!-- 遮罩層 大圖顯示圖片div begin --><div id="bgDiv"></div><div id="imgShowDiv"></div><!-- 遮罩層 大圖顯示圖片div end --><script type="text/javascript">$(document).ready(function(){//初始化可能已經存在的圖片initImg('fileBlShow','${company.fileBl}','fileBl');//初始上傳按鈕initUploadfile('fileBlUpload','上傳按鈕','fileBl');});</script> </body> </html>

上述html中涉及到的cs.css和?cs-belong.js
cs.css

?

?

* {font-size: 14px; }body,input,textarea {font-family: 微軟雅黑, helvetica, tahoma, verdana, sans-serif;padding: 0;margin: 0; }/*** 預覽圖片列表div樣式**/ .preImgList{} .preImgList img{margin: 3px 5px;border: 2px solid rgb(108, 125, 247);padding: 4px;background: white; } /*** 彈出div窗口樣式**/ #bgDiv{display: none;position: absolute;top: 0%;left: 0%;width: 100%;height: 100%;background-color: black;z-index: 1001;-moz-opacity: 0.7;opacity: .70;filter: alpha(opacity = 70); }#imgShowDiv{display: none;position: absolute;top: 1%;left: 1%;width: 95%;height: 93%;padding: 8px;border: 8px solid #E8E9F7;background-color: white;z-index: 1002;overflow: auto;text-align: center; } #imgShowDiv input{width: 50px;float: right;background-color: #358BFF;font-size: 16px;font-weight: bold;color: white; }

cs-belong.js

?

?

/** * 項目獨有的 初始化上傳空間, 圖片顯示, 刪除等功能方法**//*** 初始化上傳圖片路徑* id-按鈕控件的id, 只所以加上這個參數, 是因為原來的項目中 一個頁面有多個上傳按鈕存在的緣故* btnValue-上傳按鈕上的位子* return_input_id-返回的圖片id放置的input控件id*/ function initUploadfile(btnId,btnValue,returnInputId){$('#' + btnId).diyUpload({url: esd.common.server + 'security/filegags/upload',success:function( returndata ) {var data = returndata.notice;// 提取提示文字var notice = data.substring(0,data.indexOf('!'));if(notice == 'success'){var result = data.substring(data.indexOf('!') + 1);var preValue = $('#'+returnInputId).val();$('#'+returnInputId).val(preValue + result);}},error:function( err ) {alert('上傳圖片發生錯誤, 請刷新頁面重新嘗試, 或者聯系管理員.');},buttonText : btnValue,chunked:true,// 分片大小chunkSize:512 * 1024,//最大上傳的文件數量, 總文件大小,單個文件大小(單位字節);fileNumLimit:50,fileSizeLimit:500000 * 1024,fileSingleSizeLimit:50000 * 1024,accept: {}}); }/*** 處理 存在的圖片字符串, 分割, 并使之在前臺顯示出來~~* containerDiv-存放圖片的div* filestr-取出來的圖片名稱組字符串, 其中是用 | 鏈接* filelistinput-圖片文件名保存的隱藏input id**/ function initImg(containerDiv,filestr,filelistinput){// 分割字符串if(filestr == null || filestr == '' || filestr == undefined){return;}var fileNameArray = filestr.split('|');// 循環其中每個文件名, 組裝成對應圖片路徑, 放到對應img的src中var content = '';$.each(fileNameArray,function(index,item){if(item == null || item == undefined || item == ''){}else{//圖片, 單擊查看, 雙擊刪除content += '<img src="' + esd.common.server + 'upload/' + item + '" style="width:50px;" onmousedown="operateImg(event,this,\'' + filelistinput + '\')" />';}});$('#'+containerDiv).html(content).addClass('preImgList'); }/*** 圖片點擊事件, 左鍵查看, 右鍵刪除**/ function operateImg(event,obj,filelistinput){// 右鍵if(event.button=='2'){ delImg(obj,filelistinput);}else{//左鍵showImg(obj); } }/*** 查看單張圖片方法**/ function showImg(obj){var content = '<input type="button" value="關閉" onclick="hidediv()"/><br/><img src="' + $(obj).attr('src') + '" />';$('#bgDiv').show();$('#imgShowDiv').html(content).show(); } /*** 刪除單張圖片方法**/ function delImg(obj,filelistinput){if(filelistinput == null || filelistinput =='' || filelistinput == undefined){return;}if(!window.confirm('確實要刪除該張圖片么,此操作不可恢復, 點 “是” 繼續刪除, 點 “否” 取消。 ')){return;}else{//將對應的圖片url從隱藏的input中刪除// 1-取得圖片名并加上 |var preurl = $(obj).attr('src'); //圖片urlvar imgname = preurl.substring(preurl.lastIndexOf('/')+1) + '|'; //圖片文件名// 2-從 隱藏input中 將imgname 刪除掉~~var tt = $('#'+filelistinput).val();var targetvalue = $('#'+filelistinput).val().replace(imgname,'');// 3-新值賦給隱藏input$('#'+filelistinput).val(targetvalue);// 4-將該圖片元素去除掉$(obj).remove();} }// 隱藏遮罩層 function hidediv() {$('#bgDiv').hide();$('#imgShowDiv').hide(); }

?

以上方法即是上傳圖片到服務器. ?后續操作應該是 保存返回文件名的同時 也將服務器上保存的文件存儲到數據庫中( 此段代碼未添加, 見諒)

?

有bug或者錯誤之處歡迎指正. 私信我即可.

?

?

?

?

?

總結

以上是生活随笔為你收集整理的springmvc-带预览的异步上传图片功能的全部內容，希望文章能夠幫你解決所遇到的問題。

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