layui的upload动态数据事件绑定方法非动态渲染

原创于 2023-09-08 09:03:57 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#layui #javascript #前端

文章介绍了如何在前端使用隐藏的按钮`uploadCaseBtn`与全局变量`caseUpload`进行文件上传。通过动态生成HTML绑定`onclick`事件，可以在不重新渲染的情况下，根据需要重载参数并触发上传。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.定义一个隐藏的按钮，用于绑定渲染upload

<button id="uploadCaseBtn" type="button" style="display: none"></button>

可定义caseUpload为全局变量

caseUpload = upload.render({
    elem: '#uploadCaseBtn' //绑定元素
    , url: '/admin/system/file/uploadCaseFile'
    , accept: 'file' //普通文件
    , acceptMime: 'application/pdf'
    , exts: 'pdf'
    , done: function (res) {
        //上传完毕回调
        var data = res.data;

    }
    , error: function () {
        layer.msg("上传失败，请稍后重试");
    }
});

2.动态生成的html代码绑定onclick事件 uploadCaseFile。caseUpload全局变量后可以重装参数，只需要最后调用之前隐藏按钮的点击事件就可以调用upload方法了。不需要动态去渲染upload

function uploadCaseFile(id,type) {
    caseUpload.reload({
        data: {
            id: id,
            uploadType:type
        }
    });
    $("#uploadMeetBtn").click();
}