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


相关文章
|
负载均衡 Java 应用服务中间件
Caddy Web服务器深度解析与对比:Caddy vs. Nginx vs. Apache
Caddy Web服务器深度解析与对比:Caddy vs. Nginx vs. Apache
1585 0
解决element-ui上传多张图片时闪动问题
解决element-ui上传多张图片时闪动问题
705 0
|
JavaScript 前端开发
layui下拉框xm-select自定义搜索使用方法
【10月更文挑战第28天】`xm - select` 是基于 Layui 的下拉框增强插件,支持自定义搜索功能。实现步骤包括:1. 引入 Layui 和 xm - select 的核心文件;2. 创建下拉框的基本 HTML 结构;3. 使用 `layui.use` 函数初始化插件并配置搜索功能;4. 可选地进行高级自定义搜索优化,如模糊匹配、多字段搜索和实时更新数据。通过这些步骤,可实现灵活的下拉框搜索功能。
3105 1
|
编解码 测试技术 iOS开发
iPhone 屏幕尺寸和开发适配
【10月更文挑战第23天】iPhone 的屏幕尺寸变化给开发者带来了一定的挑战,但也为创新提供了机遇。通过深入了解不同屏幕尺寸的特点,遵循适配原则和策略,运用合适的技巧和方法,我们能够为用户提供在不同 iPhone 机型上都具有良好体验的应用。在未来,随着技术的不断进步,我们还需要持续学习和适应,以满足用户对优质应用体验的不断追求。
|
JavaScript
vue3- antd design vue 引入iconfont
vue3- antd design vue 引入iconfont
|
11月前
|
存储 人工智能 开发工具
AI场景下的对象存储OSS数据管理实践
本文介绍了对象存储(OSS)在AI业务中的应用与实践。内容涵盖四个方面:1) 对象存储作为AI数据基石,因其低成本和高弹性成为云上数据存储首选;2) AI场景下的对象存储实践方案,包括数据获取、预处理、训练及推理阶段的具体使用方法;3) 国内主要区域的默认吞吐量提升至100Gbps,优化了大数据量下的带宽需求;4) 常用工具介绍,如OSSutil、ossfs、Python SDK等,帮助用户高效管理数据。重点讲解了OSS在AI训练和推理中的性能优化措施,以及不同工具的特点和应用场景。
995 10
|
安全 数据安全/隐私保护
阿里云企业邮箱怎么开始双重认证具体步骤
要开启阿里云企业邮箱的双重认证,需登录管理员账号,导航至安全管理设置,进入密码策略,点击“开启阿里邮箱双重认证”。开启后,用户需通过手机验证码或安全问题进行二次验证。注意:此功能仅支持网页邮箱和官方客户端,且影响所有用户。
747 5
|
移动开发 前端开发 安全
uni-app跨域调试你学会了没
uni-app跨域调试你学会了没
371 0
|
前端开发 JavaScript
Layui上传文件时choose事件只触发一次的问题(两种解决方案+最终解决方案源码)
Layui上传文件时choose事件只触发一次的问题(两种解决方案+最终解决方案源码)
696 0
|
语音技术 开发者 Python
python之pyAudioAnalysis:音频特征提取分析文档示例详解
python之pyAudioAnalysis:音频特征提取分析文档示例详解
1288 0