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

最新推荐文章于 2023-10-11 16:33:09 发布

原创

最新推荐文章于 2023-10-11 16:33:09 发布 · 3.9k 阅读

标签

#layui #upload

收录于

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

获取进度条数据需要更改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 扩展需更改

在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 () {}//此处需要添加
    }

避免无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: func