layui 實現圖片上傳和預覽

[學習筆記]

圖片不自動上傳並在表單提交時再上傳，看代碼。

附上表單頁面

 

前臺實現

<#--圖片名-->
<input id="fileName" type="text" lay-verify="fileName"
autocomplete="off" class="layui-input" disabled>
<#--隱藏輸入框 用來存放上傳後圖片路徑-->
<input id="credential_hide" name="credentialOne" type="hidden" lay-verify="credentialOne"
autocomplete="off" class="layui-input">
<#--隱藏按鈕 上傳-->
<button id="upload_img" type="button" hidden></button>
<button class="layui-btn" id="preview_img" type="button">
上傳圖片
</button>
<button class="layui-btn layui-btn-normal btn-submit" id="fake">
肯定
</button>
<#---->

layui.use(['form', 'layer', 'upload'], function () {
$ = layui.jquery;
var form = layui.form，
layer = layui.layer,
upload = layui.upload;

/*上傳圖片*/
upload.render({
elem: '#preview_img'
, url: 'upload'
, size: 1024
, auto: false //不自動上傳
, bindAction: '#upload_img' //上傳綁定到隱藏按鈕
, choose: function (obj) {
//預讀本地文件
obj.preview(function (index, file, result) {
$('#fileName').val(file.name); //展現文件名
})
}
, done: function (res) {
$('#credential_hide').val(res.msg); //隱藏輸入框賦值
$('#submitForm').click(); //上傳成功後單擊隱藏的提交按鈕
}
, error: function (index, upload) {
layer.msg('上傳失敗！' + index, {icon: 5});
}
});

//肯定按鈕點擊事件
$('#fake').click(function () {
$(this).attr({'disabled': 'disabled'});
$('#upload_img').click();//單擊隱藏的上傳按鈕
});

/*監聽提交*/
form.on('submit(add_recharge_submit)', function (data) {
addRecharge(data.field);
return false;
});
});

後臺上傳接口

@ApiOperation("憑據上傳")
@PostMapping(value = "upload")
@ResponseBody
public JsonUtil imgUpload(@RequestParam("file") MultipartFile file) {
JsonUtil j = new JsonUtil();
String fileName = uploadPathURL + uploadUtil.upload(file);
j.setMsg(fileName);
return j;
}

在圖片預覽處，我加了摺疊面板以及點擊查看大圖，須要的能夠參考。

<#--摺疊面板-->
<div class="layui-collapse" lay-accordion="" style="width: 399.5px">
<div class="layui-colla-item">
<h2 class="layui-colla-title">展開圖片</h2>
<div class="layui-colla-content" id="colla_img" style="">
</div>
</div>
</div>

choose回調作一些調整

choose: function (obj) {
obj.preview(function (index, file, result) {
$('#fileName').val(file.name); //展現文件名
$('#colla_img').find('img').remove();
$('#colla_img').append('<a href="#" onclick="openImg();"><img id="showImg" src="' + result + '" width="370px"></a>');
})
}

/*查看大圖*/
function openImg() {
var idBar = '#showImg';
var src = $(idBar)[0].src;
var width = $(idBar).width();
var height = $(idBar).height();
var scaleWH = width / height;
var bigH = 550;
var bigW = scaleWH * bigH;
if (bigW > 1000) {
bigW = 1000;
bigH = bigW / scaleWH;
} // 放大預覽圖片
parent.layer.open({
type: 1,
title: false,
closeBtn: 1,
shadeClose: true,
area: [bigW + 'px', bigH + 'px'], //寬高
content: '<img width="' + bigW + '" src="' + src + '" />'
});
}

文章轉載自原文：https://blog.csdn.net/kerw1nKwan/article/details/90411628