解决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