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

青旅半醒 2022-09-12 15:51 184阅读 0赞

> # `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("文件上传失败");
                }
            });
        });