layui动态上传按钮点击无效

问题:Datatables表格里添加layui上传按钮,点击没有反应

原因:layui.upload被重复渲染之后,就会无效

解决:表格生成列时,根据行(Row) ID动态生成上传框ID保证不重复

// 上传按钮
let result = $("<button type='button' class='layui-btn upload_btn' id=\""+row.id+"\"><i class='layui_icon'>&#xe67c;</i>测试文档</button>");
// 点击事件
uploadFn('#' + row.id)

// 在这里也可以
/*layui.use(['upload'],function(){
	let upload = layui.upload;

    upload.render({
            elem: '#' + row.id
            , url: '' // 上传接口
            , before: function (obj) {
                //预读本地文件示例,不支持ie8
                obj.preview(function (index, file, result) {
                    console.log(uploadImg);
                    $(showImg).attr('src', result); //图片链接(base64)
                });
            }
            , done: function (res) {
                //如果上传失败
                if (res.error > 0) {
                    return layer.msg('上传失败');
                }
                //上传成功
                if (res.error == 0) {
                    console.log(uploadImg)
                    $(uploadimd).html(res.url);
                    return layer.msg('上传成功');
                }
            }
            , error: function () {
                //演示失败状态,并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadImg.upload();
                });
            }
        });
});*/
let upload;
layui.use(['upload'],function(){
 	upload = layui.upload;
})

/**
 * 表格上传框
 * 上传文件
 */
function uploadFn(id){
 	upload.render({
            elem: id
            , url: '' // 上传接口
          	, accept:'file'
            , done: function (res,index,upload) {
               data.testFileUrl = res.url;
                data.testFileName = res.fileName;
            }
            
        });
}
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

讓丄帝愛伱

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值