layui附件上传组件，实现layui附件上传组件抽取并改造，基于thymeleaf组件化

最新推荐文章于 2024-05-27 17:05:30 发布

原创

最新推荐文章于 2024-05-27 17:05:30 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#layui附件上传 #组件化附件上传抽取 #layui附件

本文介绍如何基于layui的附件上传功能进行抽取和改造，将其转化为一个可复用的组件化附件上传工具，该工具类为UploadUtils，采用Thymeleaf进行组件化处理。

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

由于项目用到了layui的组件上传功能所以对layui的附件上传功能做了抽取

Title

添加附件

文件名	大小	状态	操作

        <input  name="fileName" th:id="${attachContainerID}+'_attachUUIDS'" th:value="${proposalGuId}" class="layui-input layui-hide">

            <script>
                function f_[[${attachContainerID}]](upload) {
                    var JQUERY = layui.jquery;

                    //多文件列表示例
                    var demoListView = JQUERY('#[[${attachContainerID}]]');
                    upload.render({
                        elem: '#[[${attachContainerID}]]_testList'
                        , url: '../attachment/upload'
                        , accept: 'file'
                        , multiple: true
                        , auto: true
                        , size: 1024*6
                        , before: function () {
                            //debugger;

                        }
                        , choose: function (obj) {
                            var   files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                            //读取本地文件
                            //debugger;
                            obj.preview(function (index, file, result) {
                              console.log(result);
                                var tr = JQUERY(['<tr id="upload-' + index + '" class="[[${attachContainerID}]]_item">'
                                    , '<td>' + file.name + '</td>'
                                    , '<td>' + (file.size / 1014).toFixed(1) + 'kb</td>'
                                    , '<td>等待上传</td>'
                                    , '<td>'
                                    , '<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'