gitee
/
file-online-preview
mirror of https://gitee.com/kekingcn/file-online-preview
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

更新index接入演示界面UI风格

index-ui
kl 2020-12-28 13:36:08 +08:00
parent 986f562266
commit 6e8bf0d359
1 changed files with 110 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
server/src/main/resources/web/index.ftl
View File

@ -2,54 +2,52 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0"/>
<title>kkFileView演示首页</title> <title>kkFileView演示首页</title>
<link rel="stylesheet" href="css/viewer.min.css" /> <link rel="stylesheet" href="css/viewer.min.css"/>
<link rel="stylesheet" href="css/loading.css" /> <link rel="stylesheet" href="css/loading.css"/>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" /> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
<link rel="stylesheet" href="bootstrap-table/bootstrap-table.min.css" /> <link rel="stylesheet" href="bootstrap-table/bootstrap-table.min.css"/>
<link rel="stylesheet" href="gitalk/gitalk.css" /> <link rel="stylesheet" href="gitalk/gitalk.css"/>
<script type="text/javascript" src="js/jquery-3.0.0.min.js"></script> <script type="text/javascript" src="js/jquery-3.0.0.min.js"></script>
<script type="text/javascript" src="js/jquery.form.min.js"></script> <script type="text/javascript" src="js/jquery.form.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script> <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="bootstrap-table/bootstrap-table.min.js"></script> <script type="text/javascript" src="bootstrap-table/bootstrap-table.min.js"></script>
<script type="text/javascript" src="gitalk/gitalk.min.js"></script> <script type="text/javascript" src="gitalk/gitalk.min.js"></script>
<script type="text/javascript" src="js/base64.min.js" ></script> <script type="text/javascript" src="js/base64.min.js"></script>
</head> </head>
<body> <body>
<h1>文件预览项目接入和测试界面</h1> <div class="panel-group container" id="accordion">
<div class="panel-group" id="accordion"> <h1>文件预览项目接入和测试界面</h1>
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-heading"> <div class="panel-heading">
<h4 class="panel-title"> <h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
href="#collapseOne">
接入说明 接入说明
</a> </a>
</h4> </h4>
</div> </div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body"> <div class="panel-body">
<div> <div>
如果你的项目需要接入文件预览项目，达到对docx、excel、ppt、jpg等文件的预览效果，那么通过在你的项目中加入下面的代码就可以 如果你的项目需要接入文件预览项目，达到对docx、excel、ppt、jpg等文件的预览效果，那么通过在你的项目中加入下面的代码就可以
成功实现： 成功实现：
<pre style="background-color: #2f332a;color: #cccccc"> <pre style="background-color: #2f332a;color: #cccccc">
var url = 'http://127.0.0.1:8080/file/test.txt'; //要预览文件的访问地址 var url = 'http://127.0.0.1:8080/file/test.txt'; //要预览文件的访问地址
window.open('http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(base64Encode(url))); window.open('http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(base64Encode(url)));
</pre> </pre>
</div> </div>
<div> <div>
新增多图片同时预览功能，接口如下： 新增多图片同时预览功能，接口如下：
<pre style="background-color: #2f332a;color: #cccccc"> <pre style="background-color: #2f332a;color: #cccccc">
var fileUrl =url1+"|"+"url2";//多文件使用“|”字符隔开 var fileUrl =url1+"|"+"url2";//多文件使用“|”字符隔开
window.open('http://127.0.0.1:8012/picturesPreview?urls='+encodeURIComponent(base64Encode(fileUrl))); window.open('http://127.0.0.1:8012/picturesPreview?urls='+encodeURIComponent(base64Encode(fileUrl)));
</pre> </pre>
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-heading"> <div class="panel-heading">
<h4 class="panel-title"> <h4 class="panel-title">
@ -59,12 +57,11 @@ window.open('http://127.0.0.1:8012/picturesPreview?urls='+encodeURIComponent(bas
</a> </a>
</h4> </h4>
</div> </div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body"> <div class="panel-body">
<div style="padding: 10px"> <div style="padding: 10px">
<form enctype="multipart/form-data" id="fileUpload"> <form enctype="multipart/form-data" id="fileUpload">
<input type="file" name="file" /> <input type="file" name="file"/>
<input type="button" id="btnsubmit" value=" 上 传 " /> <input type="button" id="btnubmit" value=" 上 传 "/>
</form> </form>
</div> </div>
<div> <div>
@ -72,21 +69,18 @@ window.open('http://127.0.0.1:8012/picturesPreview?urls='+encodeURIComponent(bas
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-heading"> <div class="panel-heading">
<h4 class="panel-title"> <h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
href="#collapseThree"> 发版记录
更新记录
</a> </a>
</h4> </h4>
</div> </div>
<div id="collapseThree" class="panel-collapse collapse in">
<div class="panel-body"> <div class="panel-body">
<div> <div>
2020年12月27日 ：<br> 2020年12月27日 ：<br>
2020年年终大版本更新，架构全面设计，代码全面重构，代码质量全面提升，二次开发更便捷，欢迎拉源码品鉴，提issue、pr共同建设 2020年年终大版本更新，架构全面设计，代码全面重构，代码质量全面提升，二次开发更便捷，欢迎拉源码品鉴，提issue、pr共同建设<br>
1. 架构模块调整,大量的代码重构，代码质量提升N个等级，欢迎品鉴<br> 1. 架构模块调整,大量的代码重构，代码质量提升N个等级，欢迎品鉴<br>
2. 增强XML文件预览效果，新增XML文档数结构预览<br> 2. 增强XML文件预览效果，新增XML文档数结构预览<br>
3. 新增markdown文件预览支持，预览支持md渲染和源文本切换支持<br> 3. 新增markdown文件预览支持，预览支持md渲染和源文本切换支持<br>
@ -154,9 +148,9 @@ window.open('http://127.0.0.1:8012/picturesPreview?urls='+encodeURIComponent(bas
2.项目github开源:<a href="https://github.com/kekingcn/kkFileView" target="_blank">https://github.com/kekingcn/kkFileView</a> 2.项目github开源:<a href="https://github.com/kekingcn/kkFileView" target="_blank">https://github.com/kekingcn/kkFileView</a>
</div> </div>
</div> </div>
</div>
<div class="panel-body"> <div class="panel-body">
<div id = "comments"></div> <div id="comments"></div>
</div> </div>
</div> </div>
@ -190,9 +184,9 @@ window.open('http://127.0.0.1:8012/picturesPreview?urls='+encodeURIComponent(bas
url: '${baseUrl}deleteFile?fileName=' + encodeURIComponent(fileName), url: '${baseUrl}deleteFile?fileName=' + encodeURIComponent(fileName),
success: function (data) { success: function (data) {
// 删除完成，刷新table // 删除完成，刷新table
if (1 == data.code) { if (1 === data.code) {
alert(data.msg); alert(data.msg);
} else{ } else {
$('#table').bootstrapTable('refresh', {}); $('#table').bootstrapTable('refresh', {});
} }
}, },
@ -201,6 +195,7 @@ window.open('http://127.0.0.1:8012/picturesPreview?urls='+encodeURIComponent(bas
} }
}) })
} }
$(function () { $(function () {
$('#table').bootstrapTable({ $('#table').bootstrapTable({
url: 'listFiles', url: 'listFiles',
@ -211,14 +206,14 @@ window.open('http://127.0.0.1:8012/picturesPreview?urls='+encodeURIComponent(bas
field: 'action', field: 'action',
title: '操作' title: '操作'
},] },]
}).on('pre-body.bs.table', function (e,data) { }).on('pre-body.bs.table', function (e, data) {
// 每个data添加一列用来操作 // 每个data添加一列用来操作
$(data).each(function (index, item) { $(data).each(function (index, item) {
item.action = "<a class='btn btn-default' target='_blank' href='${baseUrl}onlinePreview?url="+ encodeURIComponent(Base64.encode('${baseUrl}' + item.fileName)) +"'>预览</a>" + item.action = "<a class='btn btn-default' target='_blank' href='${baseUrl}onlinePreview?url=" + encodeURIComponent(Base64.encode('${baseUrl}' + item.fileName)) + "'>预览</a>" +
"<a class='btn btn-default' href='javascript:void(0);' onclick='deleteFile(\""+item.fileName+"\")'>删除</a>"; "<a class='btn btn-default' href='javascript:void(0);' onclick='deleteFile(\"" + item.fileName + "\")'>删除</a>";
}); });
return data; return data;
}).on('post-body.bs.table', function (e,data) { }).on('post-body.bs.table', function (e, data) {
return data; return data;
}); });
@ -228,12 +223,12 @@ window.open('http://127.0.0.1:8012/picturesPreview?urls='+encodeURIComponent(bas
$(".loading_container").css("height", height).show(); $(".loading_container").css("height", height).show();
} }
$("#btnsubmit").click(function () { $("#btnSubmit").click(function () {
showLoadingDiv(); showLoadingDiv();
$("#fileUpload").ajaxSubmit({ $("#fileUpload").ajaxSubmit({
success: function (data) { success: function (data) {
// 上传完成，刷新table // 上传完成，刷新table
if (1 == data.code) { if (1 === data.code) {
alert(data.msg); alert(data.msg);
} else { } else {
$('#table').bootstrapTable('refresh', {}); $('#table').bootstrapTable('refresh', {});