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


相关文章
|
8月前
|
JavaScript 前端开发
vue前端下载,实现点击按钮弹出本地窗口,选择自定义保存路径
这个不用代码实现(网上也找不到方法可以调出另存为窗口),更改浏览器设置就可以,否则,现在的浏览器都是默认直接保存到下载路径中
718 3
|
JavaScript
VUE element-ui之el-form表单点击按钮自动增加表单(输入框),可新增删除
VUE element-ui之el-form表单点击按钮自动增加表单(输入框),可新增删除
2166 0
VUE element-ui之el-form表单点击按钮自动增加表单(输入框),可新增删除
element用户上传头像组件带大图预览,和删除功能
element用户上传头像组件带大图预览,和删除功能
|
8月前
antd如何隐藏Upload组件的删除和预览图标
antd如何隐藏Upload组件的删除和预览图标
439 1
|
8月前
|
前端开发 JavaScript 程序员
avue中怎样隐藏新增和编辑的按钮
avue中怎样隐藏新增和编辑的按钮
点击button页面重新加载刷新
点击button页面重新加载刷新
72 0
点击添加按钮弹框动态添加内容并且拼接在页面
点击添加按钮弹框动态添加内容并且拼接在页面
42 0
点击增加按钮,添加input,超过三个则增加按钮隐藏
点击增加按钮,添加input,超过三个则增加按钮隐藏
103 0
|
前端开发
添加按钮的两种方式
添加按钮的两种方式
96 0
element ui 上传图片之后跳转、刷新、保存,预览和删除丢失问题
这问题困惑了我好久,在官方的element ui 的组件库中,直接拿来使用的话,只有当前显示效果,一旦刷新页面或者保存之后,就会丢失,预览和删除功能。当保存后,保存到后端接口,再次查看,图片是能渲染出来,但是由于保存页面刷新,随之整个上传过程失败,而查看所拿到的图片只是一张静态图片,要想再次预览和查看,需要重新选中上传
287 0