thymeleaf+easy+springboot ⽂件上传下载，以及列表展⽰接⼝
这⾥只是随便写写，如果有⼤佬看到请不要喷我。
上传下载 在上⼀篇博客⾥⾯有写到我就不在描述了，这⾥我只是写⼀下我的思路。
⾸先可以让代码可以复⽤起来 这⾥⽤到的是 thymeleaf的include标签。
⽂件列表
上传按钮
通过上⾯的代码就可以实现到在不同页⾯使⽤简洁复⽤的效果了
接下来是上⾯代码的实现 使⽤th:fragment 这部分代码使⽤了easyui + lay 实现
<!-- 这⾥是⽂件列表 只需要放在需要显⽰⽂件列表的地⽅ -->
<div  th:include ="onloadJs :: filelist"></div >
<!-- 这⾥是上传按钮 引⼊后会回调save 接⼝ ps: 放在最后 避免出现页⾯没加载完成绑定不到按钮的情况-->
<div  th:include ="onloadJs :: fileUpload"></div >
<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"></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">
<script type="text/javascript"th:inline="javascript">
/
* <![CDATA[ */
var uuid = [[${uuid}]];
$(function() {
$("#fileList").datagrid({
url:"/file/filelist.json",
queryParams: {
packageid: uuidlayui下载
},
/* 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 = der({
elem: '#file'//绑定元素
,url: '/file/fileUpload.json'//上传接⼝
,auto:false
,data:{packageid:uuid}
,accept:"file"
,
bindAction:"#btn"
,multiple:true
,allDone: function(obj){ //当⽂件全部被提交后，才触发
console.log("⽂件总数"+al); //得到总⽂件数
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.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来进⾏获取⽂件。
最后效果

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。