這裡只是隨便寫寫，如果有大佬看到請不要噴我。
上傳下載 在上一篇部落格裡面有寫到我就不在描述了，這裡我只是寫一下我的思路。
首先可以讓程式碼可以複用起來 這裡用到的是 thymeleaf的include標籤。
檔案列表

    <!-- 這裡是檔案列表 只需要放在需要顯示檔案列表的地方 -->
    <div th:include="onloadJs :: filelist"></div>

上傳按鈕

<!-- 這裡是上傳按鈕 引入後會回撥save 介面 ps: 放在最後 避免出現頁面沒載入完成繫結不到按鈕的情況-->
 

<div th:include="onloadJs :: fileUpload"></div>

通過上面的程式碼就可以實現到在不同頁面使用簡潔複用的效果了
接下來是上面程式碼的實現 使用th:fragment

這部分程式碼使用了easyui + lay 實現

<div th:fragment="filelist">
        <table id="fileList" class="easyui-datagrid" title="檔案列表"  style=""
               data-options="
                    rownumbers:true,
                    pagination:false,
                    fitColumns:true,
                    iconCls:'icon-page',
                    loadMsg:'資料載入中。。。',
                    singleSelect:true
    "
 
/>
        <button type="button" class="layui-btn" id="file">
            <i class="layui-icon">&#xe67c;</i>上傳檔案
        </button>
        <script type="text/javascript" th:src="@{/static/js/jquery.js}"></script>
        <script type="text/javascript" th:src="@{/static/js/layui/layui.js}"
 
 charset="utf-8"></script>
        <script type="text/javascript" th:inline="javascript">
            /* <![CDATA[ */

            var uuid = [[${uuid}]];


            $(function () {
                $("#fileList").datagrid({
                    url:"/file/filelist.json",
                    queryParams: {
                        packageid: uuid
                    },
                    /* toolbar:toolbar, */
                    columns:[[
                        {field:'filename',title:'檔名',width:80,align: 'left', halign: 'center'},
                        {field:'cz',title:'操作' ,formatter:function (value,data,index) {
                                var html =  "<button type='button' class='layui-btn' onclick='del("+data.id+")' >刪除</button>";
                                html +="<a class='layui-btn' href='/file/download.htm?id="+data.id+"' >下載</a>";
                                console.info(data.filename.indexOf(".doc"))
                                //篩選出包含有DOC字尾的檔名
                                if(data.filename.indexOf(".doc")>-1){
                                    //篩選掉DOCX的字尾，只有DOC字尾留下
                                    if(data.filename.indexOf(".docx")<0){
                                        html += "<button type='button' class='layui-btn'  onclick='docinfo(\""+data.uuidname+"\")' >瀏覽</button>";
                                    }
                                }
                                return html;
                            }}
                    ]]
                });
            })
            function del(id){
                $.post("/file/del.json",{id:id},function (data) {
                    layui.use('layer', function() {
                        if(data==true){
                            layer.msg("刪除成功！",function () {
                                $('#fileList').datagrid('reload');//重新整理
                            }) ;
                        }else{
                            layer.msg("刪除失敗！",function () {
                                $('#fileList').datagrid('reload');//重新整理
                            }) ;
                        }
                    })
                })
            }
            function docinfo(uuid) {
                layui.use('layer', function() {
                    /*
                    如果是頁面層
                    */
                    console.info(1);
                    layer.open({
                        type: 2,
                        content: '/word/doc.htm?uuid='+uuid ,//這裡content是一個普通的String
                        area: ['85%', '95%'],
                        maxmin:true,
                        shadeClose:true
                    });
                });
            }

            /* ]]> */
        </script>
    </div>

UUID 是從後臺傳到前臺的 因為JS裡面目前我還沒找到什麼比較好的生成UUID的方式所以在後臺使用了java自帶的UUID生成。
這裡的UUID指的是包ID，這樣的話可以進行多次檔案的新增。 當已經有檔案時會將檔案的包UUID傳過來，沒有的話會生成一個新的uuid。

這裡是上傳按鈕

<div th:fragment="fileUpload">
        <script type="text/javascript" th:inline="javascript">
            /* <![CDATA[ */
            layui.use(['layer','upload'], function() {
                var layer = layui.layer;
                var upload = layui.upload;
                console.info(uuid);
                //執行例項
                var uploadInst = upload.render({
                    elem: '#file' //繫結元素
                    ,url: '/file/fileUpload.json' //上傳介面
                    ,auto:false
                    ,data:{packageid:uuid}
                    ,accept:"file"
                    ,bindAction:"#btn"
                    ,multiple:true
                    ,allDone: function(obj){ //當檔案全部被提交後，才觸發
                        console.log("檔案總數"+obj.total); //得到總檔案數
                        console.log("請求成功的檔案數"+obj.successful); //請求成功的檔案數
                        console.log("請求失敗的檔案數"+obj.aborted); //請求失敗的檔案數
                        save();
                    }
                    ,done: function(res){
                        //上傳完畢回撥
                        console.info("上傳完畢回撥"+res);
                    }
                    ,error: function(){
                        //請求異常回調
                    }
                });
            }) ;
            /* ]]> */
        </script>
    </div>

執行完成以後會呼叫save()這個function 的方法 來執行儲存操作。

下面是頁面中的上傳方法

 /**
     * 上傳按鈕回撥
     *     <div th:include="onloadJs :: filelist"></div> 上傳按鈕點選後回撥
     *     UUID 在filelist中賦值
     *     這一部分是需要修改的所以抽出來使用回撥的方式訪問
     * */
    function save(){
        var e=$('form').serializeObject();
        if(id!=null)e.id=id;
        e.regulationsId=regulationsId;
        e.packageid=uuid;
        $.ajax({
            url:"/policiesregulationsinfo/save.json",
            data:JSON.stringify(e),
            dataType:"json",
            type:"post",
            contentType:'application/json;charset=utf-8',
            success:function () {
                layer.msg("儲存成功",{time:1000},function () {
                    parent.layer.closeAll();//執行完後關閉
                })
            }
        });
    }

這樣做的話每個不同的頁面都可以只改變save中的內容其他地方直接複用就行了。
只需要在資料庫裡面吧包的uuid儲存下來 憑藉uuid來進行獲取檔案。
最後效果