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