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

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>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章