ssm框架下 多張圖片上傳
今天做一個機房資源多圖片上傳的功能；
功能描述： 一個機房資源有多張圖片，那么就必須得重新建一張表格（resourcePic），專門放機房資源圖片，
主鍵：為機房資源編號（resourceNo）,
外鍵：機房資源信息表（baseResourceInfo）里面的機房資源編號（resourceNo），和 表格resourcePic關聯；
建好表格之后；
第一步：先寫jsp頁面的內容：
因為添加功能的頁面是用form表單進行提交的，所以：
1，
<input type="file" name="fileImg" id="fileImg" onchange='openWordFile(event)' /> // type類型為file，則是上傳文件， <input type="hidden" name="baseResourceImage" id="baseResourceImage" value="" /> //from表單的隱藏域
2,
<script type="text/javascript"> var addType='${returnCode}'; //新增還是編輯 /** * 添加圖片 */ var openWordFile = function(event) { var input = event.target; // target屬性就用於返回最初觸發事件的DOM元素， var reader = new FileReader(); // FileReader 對象允許Web應用程序異步讀取存儲在用戶計算機上的文件（或原始數據緩沖區）的內容 // FileReader.onload 屬性對該事件進行處理。 //加載完成后 reader.onload = function(){ var dataURL = reader.result; //結果 fnInAddImgupload(dataURL); $("#fileImg").val(""); }; // readAsDataURL 該方法會讀取指定的 File 對象。 reader.readAsDataURL(input.files[0]); };
// 展示圖片 function fnInAddImgupload(base64){ // 生成一個objStr 由圖片的base64編碼 和 ”X” 組成 var objStr='<div class="ResouImg"><em onclick="fnInremoveImg(this)">x</em><img src="'+base64+'"/></div>'; $("#show").append(objStr); //append() 方法在被選元素的結尾（仍然在內部）插入指定內容。 //如果 圖片大於等於三個 則隱藏添加按鈕 if($(".ResouImg").length >= '3'){ $("#addmian").hide(); } }; // 刪除圖片 function fnInremoveImg(obj){ $(obj).parent().remove(); if($(".ResouImg").length < '3'){ $("#addmian").show(); } } //點擊添加的時候 function checkBaseResource(){ //添加 if(addType == '1'){ $(".ResouImg img").each(function(){ var ingurl=$(this).attr("src"); getBase64Image(ingurl,function(dataURL){ array.push(dataURL); }); }); }else{ $(".ResouImg img").each(function(){ var ingurl=$(this).attr("src"); array.push(ingurl); }); }; setTimeout(function(){ $("#baseResourceImage").val(array.join("@")); $('#baseResource').submit(); },1000); } //base64方法 function getBase64Image(imgurl,callback) { var image = new Image(); image.src = imgurl; image.onload = function(){ var canvas = document.createElement("canvas"); canvas.width = image.width; canvas.height = image.height; var ctx = canvas.getContext("2d"); ctx.drawImage(image, 0, 0, image.width, image.height); var ext = image.src.substring(image.src.lastIndexOf(".")+1).toLowerCase(); var dataURL = canvas.toDataURL("image/"+ext); callback?callback(dataURL):null; //調用回調函數 }; }; </script>
第二步：后台業務邏輯；
public String saveAndUpdataBaseResource(HttpServletRequest httpRequest,@ModelAttribute("baseResource")BaseResource baseResource, @RequestParam(value = "basenum", required = false) String basenum, @RequestParam(value = "baseName", required = false) String baseName, @RequestParam(value = "baseNo", required = false) String baseNo){ String account = (String) httpRequest.getSession().getAttribute("account"); // form表單提交 的隱藏域 basenum = httpRequest.getParameter("basenumV"); baseName = httpRequest.getParameter("baseNameV"); baseNo = httpRequest.getParameter("baseNoV"); String baseResourceImage = httpRequest.getParameter("baseResourceImage"); try { //進行判斷，如果得到的id為0或者為空則進行添加操作，否則進行編輯操作 if (baseResource.getId() == 0 || "".equals(baseResource.getId())) { baseResource.setCreatetime(DateUtils.formatDefaultDateString("yyyy-MM-dd HH:mm:ss")); baseResource.setResourceno(UUID.randomUUID().toString().replace("-", "")); baseResource.setCreater(account); baseResource.setResourcestate("1"); baseResource.setBaseno(baseNo); baseResource.setModifier(null); baseResource.setModifytime(null); baseResource.setBrief(null); baseResource.setResourcepic(null); baseResourceService.addBaseResource(baseResource); DBLog.busInfo("add baseResource", account, baseResource.getResourcename(), "機房"+baseName+"添加一條設備資源，名稱為"+baseResource.getResourcename(), httpRequest.getRemoteAddr()); //添加完其他信息，在添加圖片，注意 圖片和信息分兩個表，用resourceNo關聯 BaseResourcePic resourcePic = new BaseResourcePic(); //前端頁面傳來的是base64加密，所以我們就需要進行base64解密 String resourceimgUrl = LockSeqUtil.getBaseResourceImgDir(); //封裝一個方法，得到圖片url的地址，具體后面進行分享 String[] pathArray = FileOperateUtils.uploadBase64Img(baseResourceImage, resourceimgUrl); //封裝一個方法base64多圖片上傳，具體后面進行分享 for (int i = 0; i < pathArray.length; i++) { String pathUrl = pathArray[i]; if(StringUtils.isNotBlank(pathUrl)){ resourcePic.setResourcepic(pathUrl); resourcePic.setResourceno(baseResource.getResourceno()); resourcePic.setCreater(account); resourcePic.setCreatetime(DateUtils.formatDefaultDateString("yyyy-MM-dd HH:mm:ss")); baseResourceService.addBaseResourcePic(resourcePic); } } }else{ //編輯這一塊的業務邏輯，是根據資源編號先查，查出來后 直接刪除，再把所有的圖片一起上傳 //根據資源編號查詢資源圖片,查出來后直接刪除 String resourceNo = baseResource.getResourceno(); Map<String,Object> paramMap = new HashMap<String,Object>(); paramMap.put("resourceno", resourceNo); List<BaseResourcePic> resourcePicA = baseResourceService.handleGetResourcePic(paramMap); //根據resourceNo查詢圖片 if(resourcePicA.size()>0){ for (BaseResourcePic baseResourcePic : resourcePicA) { Integer picid = baseResourcePic.getId(); baseResourceService.HandleDeleteResourcePic(picid); // 根據id刪除圖片 } } baseResource.setCreatetime(DateUtils.formatDefaultDateString("yyyy-MM-dd HH:mm:ss")); baseResource.setCreater(account); baseResource.setResourcestate("1"); baseResource.setBaseno(baseNo); baseResource.setModifier(account); baseResource.setModifytime(DateUtils.formatDefaultDateString("yyyy-MM-dd HH:mm:ss")); baseResource.setBrief(null); baseResource.setResourcepic(null); baseResourceService.HandleUpdateBaseResource(baseResource); DBLog.busInfo("update baseResource", account, baseResource.getResourcename(), "機房"+baseName+"修改資源設備，名稱為"+baseResource.getResourcename(), httpRequest.getRemoteAddr()); BaseResourcePic resourcePic = new BaseResourcePic(); String resourceimgUrl = LockSeqUtil.getBaseResourceImgDir(); String[] pathArray = FileOperateUtils.uploadBase64Img(baseResourceImage, resourceimgUrl); for (int i = 0; i < pathArray.length; i++) { String pathUrl = pathArray[i]; if(StringUtils.isNotBlank(pathUrl)){ resourcePic.setResourcepic(pathUrl); resourcePic.setResourceno(baseResource.getResourceno()); resourcePic.setCreater(account); resourcePic.setCreatetime(DateUtils.formatDefaultDateString("yyyy-MM-dd HH:mm:ss")); baseResourceService.addBaseResourcePic(resourcePic); } } } return "redirect:/baseResource/godetails?baseNo="+baseNo; } catch (Exception e) { e.printStackTrace(); return "redirect:godetails"; } }
封裝方法一：
/** * 機房資源圖片url地址 * @return */ public static String getBaseResourceImgDir() { Date d = new Date(); SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd"); String dateNowStr = sdf.format(d); String dir = "/egsFiles/baseResource/" + dateNowStr + "/"; File file = new File(dir); if (!file.exists() && !file.isDirectory()) { file.mkdirs(); } return dir; }
封裝的方法二：base64多圖片上傳
/** * base64多圖片上傳 * @param imgStr， filePath 該參數是controller 層傳過來的； * @throws Exception */ public static String[] uploadBase64Img(String imgStr,String filePath) throws Exception { String[] strArray = new String[]{}; if (StringUtils.isNotBlank(imgStr)) { // 傳過來的imgStr用“@”隔開形成一個數組 strArray = imgStr.split("@"); } String[] filePathArray = new String[strArray.length + 1]; BASE64Decoder decoder; String imgFilePath; String tempStr; //循環圖片地址數組 for (int j = 0; j < strArray.length; j++) { //拼接圖片地址 imgFilePath = filePath + UUIDGenerator.getUUID() + ".png"; decoder = new BASE64Decoder(); tempStr = strArray[j].substring(strArray[j].indexOf(",") + 1, strArray[j].length()); // Base64解碼 byte[] bytes = decoder.decodeBuffer(tempStr); for (int i = 0; i < bytes.length; ++i) { if (bytes[i] < 0) { bytes[i] += 256; } } // 生成圖片 OutputStream out = new FileOutputStream(imgFilePath); filePathArray[j] = imgFilePath; out.write(bytes); out.flush(); out.close(); } return filePathArray; }
該隨筆只是為了鞏固自己的記憶，，，，也希望大家給予意見
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。