解決layui二次/重新選擇上傳文件無效，渲染后回調函數失效的問題
2021-10-28 15:16:44

解決layui二次/重新選擇上傳文件，渲染后回調函數失效的問題

有猿再見 2020-03-20 15:35:46   3714   收藏 2
分類專欄： 【easyUI】 文章標簽： layui layui文件上傳 layui二次渲染 layui無效
版權

【easyUI】
專欄收錄該內容
3 篇文章0 訂閱
訂閱專欄
layui在選擇圖片上傳后，如果不F5刷新頁面，第二次點擊再次上傳或者替換，會發現頁面一點反應都沒有，回調函數全部失效。

解決方法：
1-參考官方的文檔：
鏈接地址
https://www.layui.com/doc/modules/upload.html#reload


2-具體代碼

js代碼：


//定義在外部的變量
//upload所需的options
var upload_info_obj;
//upload對象
var upload;
//用于判斷的值
var sort=0;
//用于接收upload.render()返回的對象
var renderObj;
function doUpload_info() {
    upload = layui.upload;
    layui.use('upload', function () {
        var $ = layui.jquery;
        //拖拽上傳
        upload_info_obj= {
             elem: '#iconUrlIdInfo'
            , url: '/shopPic/uploadPic'
            , done: function (data,index,upload) {
                sort=1;
                $("#picUrlInfo").val(data.data);
                $('#iconUrlIdInfo').empty();
                $('#iconUrlIdInfo').append('<img src="' + data.data + '" width="180px" height="180px" class="layui-upload-img">')
            }
            ,error: function(e){
                alert("請求異常"+e);
            }
        }
    });
    //接收upload.render()返回的對象
    renderObj=upload.render(upload_info_obj);
}


function upload(){
    if (sort == 1) {
        //如果已選擇過，那么需要重新加載-----重點在這?。。?！
        renderObj.reload(upload_info_obj);
    }else{
        //喚起上傳控件
        doUpload_info();
    }
 }

html(這里是隨便寫的，意思明白即可 關鍵還要看js):

<a href="javascript:upload()">上傳</a>
————————————————
版權聲明：本文為CSDN博主「有猿再見」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/shenhaiyushitiaoyu/article/details/104991252