2017-12-27 18:45:48 +08:00
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
|
|
|
|
|
|
<html lang="en">
|
|
|
|
|
|
<head>
|
2020-02-18 17:30:30 +08:00
|
|
|
|
<meta charset="utf-8" />
|
|
|
|
|
|
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0">
|
2019-07-31 12:41:43 +08:00
|
|
|
|
<title>kkFileView演示首页</title>
|
2017-12-27 18:45:48 +08:00
|
|
|
|
<link rel="stylesheet" href="css/viewer.min.css">
|
|
|
|
|
|
<link rel="stylesheet" href="css/loading.css">
|
2020-05-13 19:40:31 +08:00
|
|
|
|
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
|
|
|
|
|
|
<link rel="stylesheet" href="bootstrap-table/bootstrap-table.min.css">
|
2017-12-27 18:45:48 +08:00
|
|
|
|
<style type="text/css">
|
|
|
|
|
|
</style>
|
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
|
<h1>文件预览项目接入和测试界面</h1>
|
|
|
|
|
|
<div class="panel-group" id="accordion">
|
|
|
|
|
|
<div class="panel panel-default">
|
|
|
|
|
|
<div class="panel-heading">
|
|
|
|
|
|
<h4 class="panel-title">
|
|
|
|
|
|
<a data-toggle="collapse" data-parent="#accordion"
|
|
|
|
|
|
href="#collapseOne">
|
|
|
|
|
|
接入说明
|
|
|
|
|
|
</a>
|
|
|
|
|
|
</h4>
|
|
|
|
|
|
</div>
|
2018-01-12 16:52:03 +08:00
|
|
|
|
<div id="collapseOne" class="panel-collapse collapse">
|
2017-12-27 18:45:48 +08:00
|
|
|
|
<div class="panel-body">
|
|
|
|
|
|
<div>
|
|
|
|
|
|
如果你的项目需要接入文件预览项目，达到对docx、excel、ppt、jpg等文件的预览效果，那么通过在你的项目中加入下面的代码就可以
|
|
|
|
|
|
成功实现：
|
|
|
|
|
|
<pre style="background-color: #2f332a;color: #cccccc">
|
2019-07-03 17:06:19 +08:00
|
|
|
|
var url = 'http://127.0.0.1:8080/file/test.txt'; //要预览文件的访问地址
|
|
|
|
|
|
window.open('http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(url));
|
2017-12-27 18:45:48 +08:00
|
|
|
|
</pre>
|
|
|
|
|
|
</div>
|
2018-01-12 16:52:03 +08:00
|
|
|
|
<div>
|
|
|
|
|
|
新增多图片同时预览功能，接口如下：
|
|
|
|
|
|
<pre style="background-color: #2f332a;color: #cccccc">
|
2019-07-03 17:06:19 +08:00
|
|
|
|
var fileUrl =url1+"|"+"url2";//多文件使用“|”字符隔开
|
|
|
|
|
|
window.open('http://127.0.0.1:8012/picturesPreview?urls='+encodeURIComponent(fileUrl));
|
2018-01-12 16:52:03 +08:00
|
|
|
|
</pre>
|
|
|
|
|
|
</div>
|
2017-12-27 18:45:48 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="panel panel-default">
|
|
|
|
|
|
<div class="panel-heading">
|
|
|
|
|
|
<h4 class="panel-title">
|
|
|
|
|
|
<a data-toggle="collapse" data-parent="#accordion"
|
|
|
|
|
|
href="#collapseTwo">
|
|
|
|
|
|
预览测试
|
|
|
|
|
|
</a>
|
|
|
|
|
|
</h4>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div id="collapseTwo" class="panel-collapse collapse">
|
|
|
|
|
|
<div class="panel-body">
|
|
|
|
|
|
<div style="padding: 10px">
|
|
|
|
|
|
<form enctype="multipart/form-data" id="fileUpload">
|
|
|
|
|
|
<input type="file" name="file" />
|
|
|
|
|
|
<input type="button" id="btnsubmit" value=" 上 传 " />
|
|
|
|
|
|
</form>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<table id="table" data-pagination="true"></table>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
2018-01-12 16:52:03 +08:00
|
|
|
|
<div class="panel">
|
|
|
|
|
|
<div class="panel-heading">
|
|
|
|
|
|
<h4 class="panel-title">
|
|
|
|
|
|
<a data-toggle="collapse" data-parent="#accordion"
|
|
|
|
|
|
href="#collapseThree">
|
|
|
|
|
|
更新记录
|
|
|
|
|
|
</a>
|
|
|
|
|
|
</h4>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div id="collapseThree" class="panel-collapse collapse in">
|
|
|
|
|
|
<div class="panel-body">
|
|
|
|
|
|
<div>
|
2019-07-03 17:06:19 +08:00
|
|
|
|
2019年06月18日 ：<br>
|
|
|
|
|
|
1. 支持自动清理缓存及预览文件<br>
|
|
|
|
|
|
2. 支持http/https下载流url文件预览<br>
|
|
|
|
|
|
3. 支持FTP url文件预览<br>
|
|
|
|
|
|
4. 加入Docker构建<br><br>
|
|
|
|
|
|
|
|
|
|
|
|
2019年04月08日 ：<br>
|
|
|
|
|
|
1. 缓存及队列实现抽象，提供JDK和REDIS两种实现(REDIS成为可选依赖)<br>
|
|
|
|
|
|
2. 打包方式提供zip和tar.gz包，并提供一键启动脚本<br><br>
|
|
|
|
|
|
|
|
|
|
|
|
2018年01月19日 ：<br>
|
|
|
|
|
|
1. 大文件入队提前处理<br>
|
|
|
|
|
|
1. 新增addTask文件转换入队接口<br>
|
|
|
|
|
|
1. 采用redis队列，支持kkFIleView接口和异构系统入队两种方式<br><br>
|
|
|
|
|
|
|
2018-01-15 16:24:08 +08:00
|
|
|
|
2018年01月15日 ：<br>
|
2019-07-03 17:06:19 +08:00
|
|
|
|
1.首页新增社会化评论框<br><br>
|
2018-01-15 16:24:08 +08:00
|
|
|
|
|
2018-01-12 16:52:03 +08:00
|
|
|
|
2018年01月12日 ：<br>
|
2018-01-15 16:24:08 +08:00
|
|
|
|
1.新增多图片同时预览<br>
|
|
|
|
|
|
2.支持压缩包内图片轮番预览<br><br>
|
2018-01-12 16:52:03 +08:00
|
|
|
|
|
|
|
|
|
|
2018年01月02日 ：<br>
|
2018-01-15 16:24:08 +08:00
|
|
|
|
1.修复txt等文本编码问题导致预览乱码<br>
|
|
|
|
|
|
2.修复项目模块依赖引入不到的问题<br>
|
|
|
|
|
|
3.新增spring boot profile，支持多环境配置<br>
|
|
|
|
|
|
4.引入pdf.js预览doc等文件，支持doc标题生成pdf预览菜单，支持手机端预览<br><br>
|
|
|
|
|
|
|
|
|
|
|
|
2017年12月12日：<br>
|
2019-07-03 17:06:19 +08:00
|
|
|
|
1.项目gitee开源:<a href="https://gitee.com/kekingcn/file-online-preview" target="_blank">https://gitee.com/kekingcn/file-online-preview</a><br>
|
2018-01-15 16:24:08 +08:00
|
|
|
|
2.项目github开源:<a href="https://github.com/kekingcn/kkFileView" target="_blank">https://github.com/kekingcn/kkFileView</a>
|
2018-01-12 16:52:03 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
2018-01-15 16:24:08 +08:00
|
|
|
|
<div class="panel-body">
|
2018-03-26 17:03:20 +08:00
|
|
|
|
<div style="width: 80%">
|
|
|
|
|
|
<!-- 多说评论框 start -->
|
|
|
|
|
|
<div id="SOHUCS" sid="kkfileView"></div>
|
2019-07-31 12:41:43 +08:00
|
|
|
|
<script charset="utf-8" type="text/javascript" src="//changyan.sohu.com/upload/changyan.js" ></script>
|
2018-03-26 17:03:20 +08:00
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
|
window.changyan.api.config({
|
|
|
|
|
|
appid: 'cytx6wU4N',
|
|
|
|
|
|
conf: 'prod_c53858654f21b8f813c14b7681f5405a'
|
|
|
|
|
|
});
|
|
|
|
|
|
</script>
|
|
|
|
|
|
<!-- 多说评论框 end -->
|
2018-01-15 16:24:08 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
2018-01-12 16:52:03 +08:00
|
|
|
|
</div>
|
2017-12-27 18:45:48 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="loading_container">
|
|
|
|
|
|
<div class="spinner">
|
|
|
|
|
|
<div class="spinner-container container1">
|
|
|
|
|
|
<div class="circle1"></div>
|
|
|
|
|
|
<div class="circle2"></div>
|
|
|
|
|
|
<div class="circle3"></div>
|
|
|
|
|
|
<div class="circle4"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="spinner-container container2">
|
|
|
|
|
|
<div class="circle1"></div>
|
|
|
|
|
|
<div class="circle2"></div>
|
|
|
|
|
|
<div class="circle3"></div>
|
|
|
|
|
|
<div class="circle4"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="spinner-container container3">
|
|
|
|
|
|
<div class="circle1"></div>
|
|
|
|
|
|
<div class="circle2"></div>
|
|
|
|
|
|
<div class="circle3"></div>
|
|
|
|
|
|
<div class="circle4"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<script src="js/jquery-3.0.0.min.js" type="text/javascript"></script>
|
2020-05-12 10:59:57 +08:00
|
|
|
|
<script src="js/jquery.form.min.js" type="text/javascript"></script>
|
2020-05-13 19:40:31 +08:00
|
|
|
|
<script src="bootstrap/js/bootstrap.min.js"></script>
|
|
|
|
|
|
<script src="bootstrap-table/bootstrap-table.min.js"></script>
|
2017-12-27 18:45:48 +08:00
|
|
|
|
<script>
|
|
|
|
|
|
function deleteFile(fileName) {
|
|
|
|
|
|
$.ajax({
|
|
|
|
|
|
url: '${baseUrl}deleteFile?fileName=' + encodeURIComponent(fileName),
|
|
|
|
|
|
success: function (data) {
|
|
|
|
|
|
// 删除完成，刷新table
|
|
|
|
|
|
if (1 == data.code) {
|
|
|
|
|
|
alert(data.msg);
|
2019-08-06 10:47:10 +08:00
|
|
|
|
} else{
|
2017-12-27 18:45:48 +08:00
|
|
|
|
$('#table').bootstrapTable('refresh', {});
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
error: function (data) {
|
|
|
|
|
|
console.log(data);
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
$(function () {
|
|
|
|
|
|
$('#table').bootstrapTable({
|
|
|
|
|
|
url: 'listFiles',
|
|
|
|
|
|
columns: [{
|
|
|
|
|
|
field: 'fileName',
|
|
|
|
|
|
title: '文件名'
|
|
|
|
|
|
}, {
|
|
|
|
|
|
field: 'action',
|
|
|
|
|
|
title: '操作'
|
|
|
|
|
|
},]
|
|
|
|
|
|
}).on('pre-body.bs.table', function (e,data) {
|
|
|
|
|
|
// 每个data添加一列用来操作
|
|
|
|
|
|
$(data).each(function (index, item) {
|
2020-05-13 10:18:58 +08:00
|
|
|
|
item.action = "<a class='btn btn-default' target='_blank' href='${baseUrl}onlinePreview?url="+ encodeURIComponent('${baseUrl}' + item.fileName ) +"'>预览</a>" +
|
2019-08-06 10:47:10 +08:00
|
|
|
|
"<a class='btn btn-default' href='javascript:void(0);' onclick='deleteFile(\""+item.fileName+"\")'>删除</a>";
|
2017-12-27 18:45:48 +08:00
|
|
|
|
});
|
|
|
|
|
|
return data;
|
|
|
|
|
|
}).on('post-body.bs.table', function (e,data) {
|
|
|
|
|
|
return data;
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
|
*
|
|
|
|
|
|
*/
|
|
|
|
|
|
function showLoadingDiv() {
|
|
|
|
|
|
var height = window.document.documentElement.clientHeight - 1;
|
|
|
|
|
|
$(".loading_container").css("height", height).show();
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
$("#btnsubmit").click(function () {
|
|
|
|
|
|
showLoadingDiv();
|
|
|
|
|
|
$("#fileUpload").ajaxSubmit({
|
|
|
|
|
|
success: function (data) {
|
|
|
|
|
|
// 上传完成，刷新table
|
|
|
|
|
|
if (1 == data.code) {
|
|
|
|
|
|
alert(data.msg);
|
2020-05-14 10:04:09 +08:00
|
|
|
|
} else {
|
2017-12-27 18:45:48 +08:00
|
|
|
|
$('#table').bootstrapTable('refresh', {});
|
|
|
|
|
|
}
|
|
|
|
|
|
$(".loading_container").hide();
|
|
|
|
|
|
},
|
2020-05-14 10:04:09 +08:00
|
|
|
|
error: function () {
|
|
|
|
|
|
alert('上传失败，请联系管理员');
|
|
|
|
|
|
$(".loading_container").hide();
|
|
|
|
|
|
},
|
2017-12-27 18:45:48 +08:00
|
|
|
|
url: 'fileUpload', /*设置post提交到的页面*/
|
|
|
|
|
|
type: "post", /*设置表单以post方法提交*/
|
|
|
|
|
|
dataType: "json" /*设置返回值类型为文本*/
|
|
|
|
|
|
});
|
|
|
|
|
|
});
|
|
|
|
|
|
});
|
|
|
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
