layui动态上传按钮点击无效

简介: 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;
            }
        });
}


相关文章
|
9月前
|
JavaScript 前端开发
vue前端下载,实现点击按钮弹出本地窗口,选择自定义保存路径
这个不用代码实现(网上也找不到方法可以调出另存为窗口),更改浏览器设置就可以,否则,现在的浏览器都是默认直接保存到下载路径中
784 3
|
6月前
|
JavaScript Java
分别使用js与jquery写 单击按钮时出现内容 点击删除按钮不会再向下出现
分别使用js与jquery写 单击按钮时出现内容 点击删除按钮不会再向下出现
33 1
|
9月前
|
前端开发
(css必看)禁止用户拖动,禁止选中复制,禁止输入框输入
(css必看)禁止用户拖动,禁止选中复制,禁止输入框输入
384 1
点击添加按钮弹框动态添加内容并且拼接在页面
点击添加按钮弹框动态添加内容并且拼接在页面
48 0
点击button页面重新加载刷新
点击button页面重新加载刷新
82 0
|
JavaScript 数据库
jQuery点击图片开启,再次点击图片关闭效果
jQuery点击图片开启,再次点击图片关闭效果
68 0
点击增加按钮,添加input,超过三个则增加按钮隐藏
点击增加按钮,添加input,超过三个则增加按钮隐藏
107 0
|
JavaScript
jquery点击删除按钮,删除当前的div
jquery点击删除按钮,删除当前的div
72 0
|
前端开发
添加按钮的两种方式
添加按钮的两种方式
101 0
Layui表格头部工具栏取消默认的三个功能
Layui表格头部工具栏取消默认的三个功能
564 0
Layui表格头部工具栏取消默认的三个功能