这里只是随便写写,如果有大佬看到请不要喷我。
上传下载 在上一篇博客里面有写到我就不在描述了,这里我只是写一下我的思路。
首先可以让代码可以复用起来 这里用到的是 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"></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来进行获取文件。
最后效果