#### layui 實現圖片上傳和預覽 ```javascript <#--圖片名--> <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; }); }); ```