LayUI多文件上传+进度条展示

这篇博客介绍了如何在LayUI中实现多文件上传并显示进度条效果,主要涉及对upload.js的修改,以解决进度条渲染的Bug。作者参考了相关文章,并提供了HTML和JS代码示例,强调前端进度条是模拟的,实际进度需要后端配合返回。
摘要由CSDN通过智能技术生成

获取进度条数据需要更改layui.all.js 或 upload.js

本文修改的为upload.js

本文参考
https://www.cnblogs.com/yangguoe/p/9066884.html 进度条渲染Bug
https://blog.csdn.net/qq_36311372/article/details/82117417 Layui文件上传

upload 扩展需更改

  1. 在p.prototype.config 处增加
p.prototype.config = {
        accept: "images",
        exts: "",
        auto: !0,
        bindAction: "",
        url: "",
        field: "file",
        acceptMime: "",
        method: "post",
        data: {},
        drag: !0,
        size: 0,
        number: 0,
        multiple: !1,
        xhr: function () {}//此处需要添加
    }
  1. 避免无xhr时异常
				t.ajax({
                        url: l.url,
                        type: "post",
                        data: r,
                        contentType: !1,
                        processData: !1,
                        dataType: "json",
                        xhr: l.xhr(function (e) {//此处为新添加功能
                            l.progress(e,a);//回调将数值返回
                        }),
                        headers: l.headers || {}, success: function (t) {
                            i++, d(e, t), u()
                        }, error: function () 
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值