layui上传文件时如何加loading效果

最新推荐文章于 2025-09-11 02:24:52 发布

原创最新推荐文章于 2025-09-11 02:24:52 发布 · 6.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#layui #javascript #html

这篇博客详细介绍了在layui框架中如何为文件上传功能添加loading加载效果。通过使用layui的layer模块，在文件上传前开启加载层，并自定义加载层的样式，如背景颜色和透明度。当文件上传成功或失败时，适时关闭加载层，提供良好的用户体验。

layui上传文件时如何加loading效果

//文件上传
    layui.use('upload', function () {
        //执行实例
        var uploadInst = upload.render({
            elem: '#iconUpload',  //绑定元素
            accept: 'file',
            url: 'https://it.xxxx.cn:xxxx/file/upload',  //上传接口
            before: function () {
            //开始加载效果
                layui.use('layer', function () {
                    layui.layer.load();
                    //console.log(Lodingindex) opacity
                    $(".layui-layer-shade").css('background', '#000000')
                    $(".layui-layer-shade").css('opacity', '0.2')
                    $(".layui-layer-shade").click(function (event) {
                        event.stopPropagation();
                    })
                })
            },
            done: function (res) {
                if (res[0] !== undefined || res[0] != null || res[0] != "") {
                    let fileLocation = "https://it.jisu8.cn:9999/dfile/" + res[0].sname;
                    $("#download").attr('placeholder', fileLocation);
                    $("#download").val(fileLocation);
                    layer.msg('上传成功');
                }
                //上传成功结束加载效果
                layui.use('layer', function () {
                    layui.layer.closeAll();
                    setTimeout(function () {
                        layui.layer.closeAll();
                    }, 2000);
                });
                form.render();
            }
            , error: function () {
                alert("文件上传失败");
            }
        });
    });