當前位置：首頁 > 编程语言 > c/c++ >内容正文

c/c++

springmvc-带预览的异步上传图片功能

發布時間：2024/8/1 c/c++ 29 豆豆

生活随笔收集整理的這篇文章主要介紹了 springmvc-带预览的异步上传图片功能小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

依賴的環境: 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"><value>1048576</value></property><property name="resolveLazily" value="true" /></bean>  <bean id="exceptionResolver" class="org.springframework.web.servlet.handler.SimpleMappingExceptionResolver"><property name="exceptionMappings"><props> <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><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" /><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><script type="text/javascript" src="${contextPath}/js/lib/diyUpload/cs-belong.js"></script> </head> <body>執照掃描件:<div id="fileBlShow"></div><div id="fileBlUpload"></div><input type="hidden" id="fileBl" name="fileBl" value="uuid1.jpg!uuid2.png!" /><div id="bgDiv"></div><div id="imgShowDiv"></div><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-带预览的异步上传图片功能的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇： yyuc php,yyuc 开发手册.z
下一篇： MATLAB人脸识别