[學習筆記]

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

附上表單頁面

前臺實現

autocomplete="off" class="layui-input" disabled>

autocomplete="off" class="layui-input">

上傳圖片

確定

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;

}

在圖片預覽處，我加了折疊面板以及點擊查看大圖，需要的可以參考。

展開圖片

choose回調做一些調整

choose: function (obj) {

obj.preview(function (index, file, result) {

$('#fileName').val(file.name); //展示文件名

$('#colla_img').find('img').remove();

$('#colla_img').append('');

})

}

/*查看大圖*/

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: ''

});

}

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

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的form表单图片预览 layui_layui 实现图片上传和预览的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。