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;
    }

 

該隨筆只是為了鞏固自己的記憶，，，，也希望大家給予意見