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

 

该随笔只是为了巩固自己的记忆，，，，也希望大家给予意见