layui彈框中的檔案上傳只執行一次choose的問題記錄
layui彈框中的檔案上傳問題記錄
1.上傳檔案的時候需要先彈出一個層再選擇檔案進行上傳，發現layui.upload上傳一次或者關閉彈框之後在不重新整理頁面的前提下不會執行choose方法了；
原因可能是upload.render方法執行一次之後，第二次沒有把elem指定的這個元素物件重新生成，而是有選擇性的更新物件的屬性，比如file就應該沒更新，還是上一次的file導致change方法沒觸發；
最簡單的是把elem指定的這個元素變成動態新增，而不是先在頁面寫死；
var initUpload = function () {
$('#uploadElem').html(`<div id="uploadBox"><button
type="button" class="layui-btn" id="test1">
<i class="layui-icon"></i>選擇excel檔案
</button><span id="selected"></span></div>`);
var uploadInst = upload.render({
elem: '#test1', //繫結元素
exts: 'xls|xlsx',
url: '', //上傳介面
done: function (res) {
}
)}
}
2.layui檔案上傳中如何先判斷後再彈出檔案選擇框
<button type="button" class="layui-btn layui-btn-normal" onclick="test()">先檢查再選圖片的按鈕</button>
<button type="button" id="idUpload" style="opacity:0;">上傳圖片</button><!-- 這個按鈕隱藏 -->
<script>
var uploadInst = layui.upload.render({
elem: '#idUpload',
url: '/upload/',
done: function(res) {
//上傳完畢回撥
},
error: function() {
//請求異常回調
}
});
function test() {
//在此做你的檢查
$('#idUpload').click(); //檢查通過再選上傳圖片
}
</script>
3.清空 input file 值，以免出現同名檔案不可選
var uploadRender = upload.render();
在choose方法中新增：uploadRender.config.elem.next()[0].value = '';
4.限制了所選檔案型別後，如果選擇的檔案包含不支援格式的檔案則不走choose回撥
————————————————
版權宣告：本文為CSDN博主「lijingjingjing22」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處連結及本宣告。
原文連結：https://blog.csdn.net/lijingjingjing22/article/details/116453776