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

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

lengRuShuang116

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

阅读量1.2k

点赞数

分类专栏：随记文章标签： layui附件上传组件化附件上传抽取 layui附件

本文链接：https://blog.csdn.net/lengRuShuang116/article/details/99717560

版权

由于项目用到了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>'
                                    , '<a  id="'