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;
            }
        });
}


相关文章
|
前端开发 CDN
钉钉卡片点击按钮,跳转连接,css无法加载
钉钉卡片点击按钮,跳转连接,css无法加载
77 1
|
12月前
点击button页面重新加载刷新
点击button页面重新加载刷新
55 0
|
12月前
点击添加按钮弹框动态添加内容并且拼接在页面
点击添加按钮弹框动态添加内容并且拼接在页面
31 0
|
12月前
|
JavaScript 数据库
jQuery点击图片开启,再次点击图片关闭效果
jQuery点击图片开启,再次点击图片关闭效果
49 0
|
12月前
|
JavaScript
layUI日期控件无效、一闪而过的解决方案
layUI日期控件无效、一闪而过的解决方案
182 0
|
前端开发
添加按钮的两种方式
添加按钮的两种方式
83 0
element ui 上传图片之后跳转、刷新、保存,预览和删除丢失问题
这问题困惑了我好久,在官方的element ui 的组件库中,直接拿来使用的话,只有当前显示效果,一旦刷新页面或者保存之后,就会丢失,预览和删除功能。当保存后,保存到后端接口,再次查看,图片是能渲染出来,但是由于保存页面刷新,随之整个上传过程失败,而查看所拿到的图片只是一张静态图片,要想再次预览和查看,需要重新选中上传
228 0
|
JavaScript
fastadmin 自定义 按钮 动态切换数据 TAB切换
fastadmin 自定义 按钮 动态切换数据 TAB切换
271 0
Layui表格头部工具栏取消默认的三个功能
Layui表格头部工具栏取消默认的三个功能
484 0
Layui表格头部工具栏取消默认的三个功能
|
JavaScript 前端开发
css:隐藏input file标签并触发点击上传文件事件
css:隐藏input file标签并触发点击上传文件事件
586 0
css:隐藏input file标签并触发点击上传文件事件