基于layui的图片上传和预览，记录一下

1.1 HTML

<div class="layui">
                    <label class="layui-form-label"><i class="tip-required" style="color: red;font-size: 20px">*</i>营业执照</label>
                    <div class="layui-upload">
			          <button type="button" class="layui-btn" id="upload1" name="uploadPic">上传图片</button>
			          <button type="button" class="layui-btn" id="hideUpload1" style="display: none"></button>
			          <div class="layui-upload-list" style="display:inline-block;" >
			          	<img class="layui-upload-img" id="demo1" name="demo" width="100px" height="100px">
			          </div>
			        </div>
                </div>
                <div class="layui">
                    <label class="layui-form-label"><i class="tip-required" style="color: red;font-size: 20px">*</i>法人身份证</label>
                    <div class="layui-upload">
			          <button type="button" class="layui-btn" id="upload2" name="uploadPic">上传图片</button>
			          <button type="button" class="layui-btn" id="hideUpload2" style="display: none"></button>
			          <div class="layui-upload-list" style="display:inline-block;">
			            <img class="layui-upload-img" id="demo2" name="demo" width="100px" height="100px">
			          </div>
			        </div>
                </div>

1.2 js

$(function () {
    
//几张照片，循环几次，同一不需要init多次，示例中是两张
	for (var i=1;i<3;i++){ 
		initUpload(i);
	}

    //新增页面方法注册绑定
	$('#addBtn').on('click', function(e) {
        $.ajax({
			type: "POST",
			url: "数据url",
			data: {
				id: id
			},
			success: function(data) {
				//几张照片，循环几次(有个小bug，数据成功才传图片，图片失败数据库的数据就没图片)
			    for (var i=1;i<3;i++){ 
			    	$("#hideUpload"+i+"").trigger("click");
			    }
			},
			error: function(data) {
				
			}
		})

    })

});


//图片预览和上传的方法
var arr = new Array();
var formArr = new Array();
var uploadRenderArr = new Array();
var laydateRenderArr = new Array();
function initUpload(i) {
    layui.use(['upload', 'form'], function() {
    arr[i] = layui.upload;
    formArr[i] = layui.form;
    //图片上传
    uploadRenderArr[i] = arr[i].render({
      elem: '#upload' + i,
      url: bonuspath + '/backstage/upload/uploadFile', //改成您自己的上传接口
      multiple: false, //是否允许多文件上传，默认未false
      dataType: "json",
      exts: 'jpg|png|jpeg',
      acceptMime: 'image/jpg,image/png,image/jpeg',
      number: 1, //最大上传数量
      size: 1024 * 5, //最大文件大小，单位k
      auto: false, //是否自动上传 ，默认为true
      bindAction: '#hideUpload' + i, //绑定的按钮
      field: 'file', //传到后台的字段名,默认file
      choose: function(obj) {
    	//预读本地文件示例，不支持ie8A
    	obj.preview(function(index, file, result) {
          $('#demo'+i+'').attr('src', result); //图片链接（base64）
        });
      },
      before: function(obj) {
        // 图片上传携带的参数
        this.data = {
                  pageName:"核心分包商列表",//什么页面
                  photoId:i,//照片id
                  photoPackage:"coresub",
                  antoId:autoId,//
            };
      },
      done: function(data) {
        // 图片上传完成后执行的回调函数
        num ++;
        if(7 == num){ // 执行关闭页面
          parent.layer.msg("图片上传成功",{icon:1,time:2000});
          reloading();
        }
      },
      error: function(e) {
        //请求异常回调
        console.log(e)
      }
    });
  });
}

3.3 图片上传的后端

@Autowired
	private CoreSubService coreSubService;
	
	List<MapBean> listMap = new ArrayList<>();
	
    //多照片上传
    @RequestMapping(value = "uploadFile", method = RequestMethod.POST)
    @ResponseBody
    public AjaxRes uploadFile(HttpServletRequest request) throws IllegalStateException, IOException, ParseException {
        AjaxRes ar = new AjaxRes();
        HashMap<String, Object> map = uploadFileSpring(request);
        if (map == null) {
            return null;
        }
        List<String> urlStr = new LinkedList<>();
        CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver();
        MultipartHttpServletRequest multiReq = multipartResolver.resolveMultipart(request);
        
        String pageName = multiReq.getParameter("pageName"); // 获取前台传过来的页面名字
        String photoId = multiReq.getParameter("photoId");//获取前台传过来的照片id
        String photoPackage = multiReq.getParameter("photoPackage");//获取前台传过来的照片存储包
        String antoId = multiReq.getParameter("antoId");//获取主键
        List<MultipartFile> items = (List<MultipartFile>) map.get("filePath");
        logger.error("items==" + items.size());
        for (int i = 0; i < items.size(); i++) {
            MultipartFile item = items.get(i);
            String tmpName = item.getOriginalFilename();// 完整路径 IE
            if (StringHelper.isEmpty(tmpName)) {
                return null; // 根据情况
            }
            String suffix = tmpName.substring(tmpName.lastIndexOf("."));
            String fileName = DateTimeHelper.getNowDate().replace("-", "") + "_" + generateShortUuid() + "_"+photoId+ suffix;
//            String fileName =  UUID.randomUUID().toString().replace("-","") + suffix;
            String mkdirsName = photoPackage; // 不同照片创建不同包
            String imageFiles = "/data/gs/" + mkdirsName + "/"; // linux 系统路径
            String osName = System.getProperty("os.name");
            if (osName.toLowerCase().startsWith("win")) {
                imageFiles = "D://files/" + mkdirsName;
            }
            String path = imageFiles + "/" + DateTimeHelper.getYear(new Date()) + "/" + DateTimeHelper.getMonth(new Date()) + "/" + fileName;
            File file = new File(path);
            //生成文件夹
            if (!file.getParentFile().exists()) {
                file.getParentFile().mkdirs();
            }
            //存入临时文件
            item.transferTo(file);
//            file.delete();
            try {
            	String falsePath = "/upload/files/"+ mkdirsName + "/" + DateTimeHelper.getYear(new Date()) + "/" + DateTimeHelper.getMonth(new Date()) + "/" + fileName;
            	if(osName.toLowerCase().startsWith("win")) {
            		falsePath = "/images/"+ mkdirsName + "/" + DateTimeHelper.getYear(new Date()) + "/" + DateTimeHelper.getMonth(new Date()) + "/" + fileName;
            	}
            	
            	//根据前台结果存储到指定表
            	setToDataBase(antoId,pageName,photoId,falsePath);
            } catch (Exception e) {
                logger.error(e.toString(), e);
                ar.setFailMsg(GlobalConst.SAVE_FAIL);
            }
        }
        ar.setSucceed(urlStr, GlobalConst.UPLOAD_SUCCEED);
        return ar;
    }
    
	public HashMap<String, Object> uploadFileSpring(HttpServletRequest request) {
        HashMap<String, Object> map = new HashMap<String, Object>();
        // 创建一个通用的多部分解析器
        CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(request.getSession().getServletContext());
        List<MultipartFile> tmps = new ArrayList<MultipartFile>();
        if (multipartResolver.isMultipart(request)) {
            //转换成多部分request
            MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
            Iterator<String> iter = multiRequest.getFileNames();
            while (iter.hasNext()) {
                MultipartFile file = multiRequest.getFile(iter.next());
                tmps.add(file);
            }
            map.put("filePath", tmps);
        }
        return map;
    }
	
	
	/**
	 * 根据前端参数插入选择表插入数据
	 * @param pageName 
	 * @param photoId
	 * @param path
	 */
	private void setToDataBase(String autoId,String pageName, String photoId, String path) {
		
    	if("核心分包商列表".equals(pageName)){
    		coreSubService.insertPhoto(autoId,photoId,path);
    	}
		
	}
	

    public static String[] chars = new String[]{"a", "b", "c", "d", "e", "f",
            "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s",
            "t", "u", "v", "w", "x", "y", "z", "0", "1", "2", "3", "4", "5",
            "6", "7", "8", "9", "A", "B", "C", "D", "E", "F", "G", "H", "I",
            "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V",
            "W", "X", "Y", "Z"};

//图片命名规则
    public static String generateShortUuid() {
        StringBuffer shortBuffer = new StringBuffer();
        String uuid = UUID.randomUUID().toString().replace("-", "");
        for (int i = 0; i < 8; i++) {
            String str = uuid.substring(i * 4, i * 4 + 4);
            int x = Integer.parseInt(str, 16);
            shortBuffer.append(chars[x % 0x3E]);
        }
        return shortBuffer.toString();
    }