java实现多图片预览 java多张图片上传

实现不走以及效果如下：

1：点击：

2：弹出：

3：选择多张图片：

4：选中之后，点击打开，图片显示出来：

5：实现代码如下：

前台页面：

<!-- 新商品详情图片-->
                  <a href="javascript:void(0);" class="btn_addPic">
                         <span id="imgTitle">上传自定义详情图</span>                                                                    
                         <input type="file" name="file" id="logoFile2" onchange="setImg2(this);" class="selectedLogoImgId"
                         accept="image/jpg,image/jpeg,image/png,image/bmp" multiple/>
                     </a>
                    <br/><font color="red">图片尺寸：750*300（支持多图批量上传）</font>
                  <div class="cp-img" id="logoImgDiv6">
                    <ul id="detailImgs" style="overflow: hidden;">
                        <li style="display:none;" id="P0">                                       
                    </ul>
                     <span id="hiddenss1"></span>
                  </div>

js页面：

function setImg2(obj){//用于进行图片上传，返回地址
            var f=$(obj).val();
            if(f == null || f ==undefined || f == ''){
                return false;
            }else if(!/\.(?:png|jpg|bmp|gif|PNG|JPG|BMP|GIF)$/.test(f))
            {
                alertLayel("类型必须是图片(.png|jpg|bmp|gif|PNG|JPG|BMP|GIF)");
                $(obj).val('');
                return false;
            }else{
                //批量上传图片
                $.ajaxFileUpload({
                     url:"/business/uploadImgList.html",//需要链接到服务器地址   
                      secureuri:false,  
                      fileElementId:"logoFile2",//文件选择框的id属性  ,//文件选择框的id属性  
                      dataType: 'json',   //json 
                      contentType: false,    //不可缺
                     processData: false,    //不可缺
                    success: function (data){
                        if(data!=null){
                            $.each(data,function(i,url){
                               //拼接图片列表 
                                 var id = $('#detailImgs li:last').attr('id');
                                     id = id.substr(1);
                                     id = parseInt(id) + 1;
                                     var ids=id;
                                     id = 'P'+id;                                                    
                                 var a_hidden="<li id='"+ id +"'><input type='hidden' value='"+url+"' name='imgs'>";
                                 var img_html="<img  src='"+url+"'  onclick='showOriginal(this)' original='"+url+"'>";
                                 var a_html="<a href='javascript:void(0);' onclick='delespan1("+ids+")'>删除</a>";
                                 var li_html="</li>";
                                $('#detailImgs').append(a_hidden+img_html+a_html+li_html);
                            });
                        }else{
                            alertLayel("上传失败");
                            $("#url").val("");
                            $(obj).val('');
                        }                   
                    },
                    error:function(XMLHttpRequest, textStatus, errorThrown){  
                        alertLayel("上传失败，请检查网络后重试");
                        $("#url").val("");
                        $(obj).val('');
                   } 
                });
            }
        }
上传之后如果感觉有张上传错了，想删除怎么办：
    function delespan1(id){
           $('#P'+id).remove();
    }

后台代码：

import org.springframework.web.multipart.MultipartFile;
  import java.io.File;
/**
 * @Description: 批量上传图片文件
 * @author: qinzz
 * @date: 2017年03月31日
 * @return:String
 */
@ResponseBody
@RequestMapping("/uploadImgList.html")
public String uploadPictureList(
        @RequestParam(value="file",required=false)MultipartFile[] file,
        HttpServletRequest request){
    File targetFile=null;
    String msg="";//返回存储路径
    int code=1;
    List imgList=new ArrayList();
    if (file!=null && file.length>0) {
        for (int i = 0; i < file.length; i++) {
            String fileName=file[i].getOriginalFilename();//获取文件名加后缀
            if(fileName!=null&&fileName!=""){   
                String returnUrl = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() +"/upload/imgs/";//存储路径
                String path = request.getSession().getServletContext().getRealPath("upload/imgs"); //文件存储位置
                String fileF = fileName.substring(fileName.lastIndexOf("."), fileName.length());//文件后缀
                fileName=new Date().getTime()+"_"+new Random().nextInt(1000)+fileF;//新的文件名

                //先判断文件是否存在
                String fileAdd = DateUtil.format(new Date(),"yyyyMMdd");
                File file1 =new File(path+"/"+fileAdd); 
                //如果文件夹不存在则创建    
                if(!file1 .exists()  && !file1 .isDirectory()){       
                    file1 .mkdir();  
                }
                targetFile = new File(file1, fileName);
                try {
                    file[i].transferTo(targetFile);
                    msg=returnUrl+fileAdd+"/"+fileName;
                    imgList.add(msg);
                } catch (Exception e) {
                    e.printStackTrace();
                }
            }
        }
    }               
    return JSON.toJSONString(imgList);
}
```
点击保存之后的后台代码，form表单提交：

将上传的多张图片保存在图片表里面，并设置一个外键与主表的主键关联，以便查询的时候关联显示。
    @RequestMapping("/add.html")
    public String add(
    @RequestParam(value = "imgs", required = false) String[] imgs){
        if(imgs != null && imgs.length>0){
            for (String string : imgs) {
                MallProductDetailImgs img = new MallProductDetailImgs();
                img.setImgUrl(string);
                img.setProductId(product.getId());
                img.setCreateDateTime(new Date());
                img.setUpdateTime(new Date());
                img.setStatus(Byte.parseByte("1"));
                img.setInvalid(false);
                mallProductDetailImgsService.insertSelective(img);
            }
        }
    }