layui 上传图片回显并点击放大实现

1、页面代码布局

<div class="layui-col-xs12 form-group">
                    <div class="layui-col-xs6">
                        <div class="layui-col-xs3">
                            <label>标题</label>
                        </div>
                        <div class="layui-col-xs7">
                            <input type="text" name="title" id="title" required lay-verify="required"
                                   placeholder="请输入图片标题"
                                   autocomplete="off" class="layui-input">
                            <input type="hidden" name="id">
                        </div>
                    </div>
                </div>

2、点击放大设置

var renderImg = function () {
            form.render();
            layer.photos({
                photos: '.theImg'
                , anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
            });
        }

3、上传成功之后，回显

//图片上传
        upload.render({
            elem: '#uploadImg'
            , url: "commonCtrl/receiptUpload" //必填项
            , method: ''  //可选项。HTTP类型，默认post
            , accept: 'images'
            , acceptMime: 'image/*'
            , data: {flag: "rotationChart"} //可选项。额外的参数，如：{id: 123, abc: 'xxx'}
            , before: function (obj) { //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
                //预读本地文件示例，不支持ie8
            }
            ,done: function(res){
                //如果上传失败
                if(!res.success){
                    return layer.alert('上传失败');
                }
                //上传成功
                var img = '<img layer-pid="rotationChartDiv" alt=""  layer-src="' + res.data.url + '" src="' +
                    res.data.url + '" style="max- 100%;max-height: 100%;">';
                $("#rotationChartDiv").html(img);
                $("#url").val(res.data.url);
                //点击放大
　　　　　　　　　　renderImg();
            }
            ,error: function(){
                layer.msg("上传失败");
            }
        });

end：补上上传接口实现代码

controller层

 @RequestMapping(value = "/receiptUpload", method = RequestMethod.POST)
  @ResponseBody
  public YJLResponseModel receiptUpload(@RequestParam("file") MultipartFile img, @RequestParam String flag) {
    return UploadUtil.fileUploadServices(img, flag);
  }

service层：

public static Map fileUploadServices(MultipartFile file,
                                                      String flag) {
        Map<String, String> result = new HashMap<>();
        String name = file.getOriginalFilename();
        String suffixName = "";
        /*
         * MultipartFile转File
         */
        File f = null;
        try {
            if (!name.contains(".")) {
                errorMsg = "文件不能为空！";
                throw new Exception(getErrorMsg());
            } else {
                suffixName = name.substring(name.indexOf("."));
                f = File.createTempFile("tmp", null);
                //通过MultipartFile的transferTo(File dest)这个方法来转存文件到指定的路径。MultipartFile转存后，无法再操作，会报错
                file.transferTo(f);
                //在JVM进程退出的时候删除文件,通常用在临时文件的删除.
                f.deleteOnExit();

                /*
                 * File转byte
                 */
                byte[] buffer = null;
                if (f != null) {
                    FileInputStream fis = new FileInputStream(f);
                    ByteArrayOutputStream bos = new ByteArrayOutputStream();
                    byte[] b = new byte[1024];
                    int n;
                    while ((n = fis.read(b)) != -1) {
                        bos.write(b, 0, n);
                    }
                    fis.close();
                    bos.close();
                    buffer = bos.toByteArray();

                    /*
                     *  byte上传到webService
                     */
                    UploadService myServiceImplService = new UploadService();
                    UploadServiceSoap msis = myServiceImplService.getUploadServiceSoap();
                    //是否上传成功
                    Holder<Boolean> hb = new Holder<>();
                    //上传成功后文件的路径
                    Holder<String> hs = new Holder<>();
                    msis.uploadFile(buffer, flag, suffixName, hb, hs);
                    if (hb.value) {
                        setSuccess(true);
                        Map<String, String> map = new HashMap<>();
                        map.put("url", hs.value);
                        result.put("data",map);
                    } else {
             errorMsg = "上传失败！";
                    }
                } else {
                    errorMsg = "文件不能为空！";
                    throw new Exception(getErrorMsg());
                }
            }

        } catch (Exception e) {
            e.printStackTrace();
            logger.error(e.getMessage());
        } finally{
        result.put("msg",errorMsg);
    }
    return result;
    }