<!DOCTYPE html>
|
<html>
|
<head>
|
<meta charset="utf-8"/>
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
<title>BlueDeer</title>
|
<link rel="stylesheet" href="assets/layui/css/layui.css">
|
<link rel="stylesheet" href="assets/common.css">
|
<link rel="shorcut icon" href="assets/images/logo.png">
|
</head>
|
|
<body>
|
<div class="header">
|
<div class="layui-container">
|
<div class="layui-logo">
|
<img src="https://static.tohours.com/jren/images/bluedeer.jpg"/><cite><span><a href="./">File Management System</a></span></cite>
|
</div>
|
</div>
|
</div>
|
|
<div class="layui-container" style="padding-top: 15px;">
|
<div class="layui-card">
|
<div class="layui-card-header">当前位置：<span id="tvFP">/</span></div>
|
<div class="layui-card-body">
|
<div class="btnDiv">
|
<button id="btnBack" class="layui-btn layui-btn-sm layui-btn-primary icon-btn"><i class="layui-icon"></i>返回上级
|
</button>
|
<button id="btnRefresh" class="layui-btn layui-btn-sm layui-btn-primary icon-btn"><i class="layui-icon"></i>刷新
|
</button>
|
<button id="btnUpload" class="layui-btn layui-btn-sm layui-btn-normal icon-btn"><i class="layui-icon"></i>上传文件
|
</button>
|
<button id="btnNewDir" class="layui-btn layui-btn-sm layui-btn-normal icon-btn"><i class="layui-icon layui-icon-add-circle"></i>新建文件夹
|
</button>
|
<button id="btnDelDir" class="layui-btn layui-btn-sm layui-btn-primary icon-btn"><i class="layui-icon layui-icon-delete"></i>刪除目录
|
</button>
|
<button id="btnRname" class="layui-btn layui-btn-sm layui-btn-primary icon-btn"><i class="layui-icon layui-icon-edit"></i>重命名目录
|
</button>
|
</div>
|
|
<div class="file-list"></div>
|
</div>
|
</div>
|
</div>
|
|
<div style="text-align: center;margin: 60px 0 20px 0">
|
<a style="color: #777;" href="https://xinke.org.cn" target="_blank">ECode1024</a> |
|
<a style="color: #777;" href="https://tool.xinke.org.cn" target="_blank">工具帝国</a> |
|
<a style="color: #777;" href="https://piiic.xinke.org.cn" target="_blank">长图工具</a> |
|
<a style="color: #777;" href="https://codeif.xinke.org.cn" target="_blank">CodeIF</a> |
|
<a style="color: #777;" href="https://sorry.xinke.org.cn" target="_blank">Sorry生成</a>
|
</div>
|
|
<!-- 下拉菜单 -->
|
<div class="dropdown-menu dropdown-anchor-top-left" id="dropdownFile">
|
<div class="dropdown-anchor"></div>
|
<ul>
|
<li><a id="open"><i class="layui-icon layui-icon-file"></i> 查看 </a></li>
|
<li><a id="down"><i class="layui-icon layui-icon-download-circle"></i> 下载 </a></li>
|
<li>
|
<a id="del" style="color: red !important;">
|
<i class="layui-icon layui-icon-delete" style="font-size: 19px;"></i> 删除 
|
</a>
|
</li>
|
<li><a id="share"><i class="layui-icon layui-icon-share"></i> 分享 </a></li>
|
<li><a id="rename"><i class="layui-icon layui-icon-edit"></i> 重命名 </a></li>
|
</ul>
|
</div>
|
|
<input type="hidden" id="shareFileUrl" value="">
|
|
<!-- 渲染模板 -->
|
<script id="fileTpl" type="text/html">
|
{{# layui.each(d, function(index, item){ }}
|
<div class="file-list-item" data-dir="{{item.isDir}}" data-url="{{item.url}}" data-name="{{item.name}}" data-preview="{{item.preview}}">
|
<div class="file-list-img {{item.hasSm?'media':''}}">
|
{{# if(item.hasSm){ }}
|
<img src="{{item.smUrl}}"/>
|
{{# }else{ }}
|
<img src="assets/images/fti/{{item.type}}.png"/>
|
{{# } }}
|
</div>
|
<div class="file-list-name">{{item.name}}</div>
|
</div>
|
{{# }); }}
|
{{# if(d.length<=0){ }}
|
<div class="list-empty">
|
<i class="layui-icon layui-icon-face-surprised"></i>
|
<div>没有文件</div>
|
</div>
|
{{# } }}
|
</script>
|
|
<script type="text/javascript" src="assets/layui/layui.js"></script>
|
<script type="text/javascript" src="assets/clipboard.min.js"></script>
|
<script type="text/javascript" src="assets/config.js"></script>
|
<script>
|
layui.use(['jquery', 'layer', 'element', 'upload', 'laytpl', 'util'], function () {
|
var $ = layui.jquery;
|
var layer = layui.layer;
|
var element = layui.element;
|
var upload = layui.upload;
|
var laytpl = layui.laytpl;
|
var util = layui.util;
|
|
// 渲染文件列表
|
function renderList(dir) {
|
if ($('#tvFP').text() == '/') {
|
$('#btnDelDir').hide();
|
$('#btnRname').hide();
|
} else {
|
$('#btnDelDir').show();
|
$('#btnRname').show();
|
}
|
if (!dir) {
|
dir = $('#tvFP').text();
|
}
|
layer.load(2);
|
$.get(baseServer + 'api/list', {
|
dir: dir
|
}, function (res) {
|
layer.closeAll('loading');
|
if (res.code == 200) {
|
for (var i = 0; i < res.data.length; i++) {
|
res.data[i].url = baseServer + 'file/' + res.data[i].url;
|
res.data[i].smUrl = baseServer + 'file/sm?p=' + res.data[i].smUrl;
|
}
|
laytpl(fileTpl.innerHTML).render(res.data, function (html) {
|
$('.file-list').html(html);
|
});
|
} else {
|
layer.msg(res.msg, {icon: 2});
|
}
|
});
|
}
|
|
renderList();
|
|
// 上传文件事件
|
upload.render({
|
elem: '#btnUpload',
|
data: {},
|
url: baseServer + 'file/upload',
|
before:function(obj){
|
// 动态传参
|
this.data.curPos = $('#tvFP').text();
|
},
|
choose: function (obj) {
|
layer.load(2);
|
},
|
done: function (res, index, upload) {
|
layer.closeAll('loading');
|
if (res.code != 200) {
|
layer.msg(res.msg, {icon: 2});
|
} else {
|
layer.msg(res.msg, {icon: 1});
|
renderList();
|
}
|
},
|
error: function () {
|
layer.closeAll('loading');
|
layer.msg('上传失败', {icon: 2});
|
},
|
accept: 'file'
|
});
|
|
// 刷新
|
$('#btnRefresh').click(function () {
|
renderList();
|
});
|
|
var mUrl;
|
// 列表点击事件
|
$('body').on('click', '.file-list-item', function (e) {
|
var isDir = $(this).data('dir');
|
var name = $(this).data('name');
|
var preview = $(this).data('preview');
|
mUrl = $(this).data('url');
|
$('#copy').attr('data-clipboard-text', mUrl);
|
if (isDir) {
|
var cDir = $('#tvFP').text();
|
cDir += (cDir == '/' ? name : ('/' + name));
|
$('#tvFP').text(cDir);
|
renderList(cDir);
|
} else {
|
var $target = $(this).find('.file-list-img');
|
$('#dropdownFile').css({
|
'top': $target.offset().top + 90,
|
'left': $target.offset().left + 25
|
});
|
$('#dropdownFile').addClass('dropdown-opened');
|
if (!preview) {
|
$('#open').hide();
|
} else {
|
$('#open').show();
|
}
|
if (e !== void 0) {
|
e.preventDefault();
|
e.stopPropagation();
|
}
|
}
|
});
|
|
// 返回上级
|
$('#btnBack').click(function () {
|
var cDir = $('#tvFP').text();
|
if (cDir == '/') {
|
layer.msg('已经是根目录')
|
} else {
|
cDir = cDir.substring(0, cDir.lastIndexOf('/'));
|
if (!cDir) {
|
cDir = '/';
|
}
|
$('#tvFP').text(cDir);
|
renderList(cDir);
|
}
|
});
|
|
// 点击空白隐藏下拉框
|
$('html').off('click.dropdown').on('click.dropdown', function () {
|
$('#copy').attr('data-clipboard-text', '');
|
$('#dropdownFile').removeClass('dropdown-opened');
|
});
|
|
// 查看
|
$('#open').click(function () {
|
var fullName = mUrl.substr(7);
|
window.open("file?p=" + fullName + "&d=0", '_blank');
|
});
|
|
// 下载
|
$('#down').click(function () {
|
var fullName = mUrl.substr(7);
|
window.open("file?p=" + fullName + "&d=1", '_blank');
|
});
|
|
// 删除
|
$('#del').click(function () {
|
layer.confirm('确定要删除此文件吗？', function () {
|
layer.load(2);
|
$.get(baseServer + 'api/del', {
|
file: mUrl.substring(mUrl.indexOf('/file/') + 6)
|
}, function (res) {
|
layer.closeAll('loading');
|
if (res.code == 200) {
|
layer.msg(res.msg, {icon: 1});
|
renderList();
|
} else {
|
layer.msg(res.msg, {icon: 2});
|
}
|
});
|
});
|
});
|
|
// 重命名
|
$('#rename').click(function () {
|
layer.prompt({
|
formType: 0,
|
value: mUrl.substr(mUrl.lastIndexOf('/') + 1),
|
title: '新文件名'
|
}, function(value, index, elem){
|
var oldFile = mUrl.substring(mUrl.indexOf('/file/') + 6);
|
var newFile = mUrl.substr(7, mUrl.lastIndexOf('/') - 6) + value;
|
layer.load(2);
|
$.get(baseServer + 'api/rename', {
|
oldFile: oldFile,
|
newFile: newFile
|
}, function (res) {
|
layer.closeAll('loading');
|
if (res.code == 200) {
|
layer.msg(res.msg, {icon: 1});
|
renderList();
|
} else {
|
layer.msg(res.msg, {icon: 2});
|
}
|
});
|
layer.close(index);
|
});
|
});
|
|
// 分享
|
$('#share').click(function () {
|
layer.prompt({
|
formType: 0,
|
value: '30',
|
title: '设置时间(分钟)'
|
}, function(value, index, elem){
|
var file = mUrl.substr(7);
|
layer.load(2);
|
$.post(baseServer + 'api/share', {
|
file: file,
|
time: value
|
}, function (res) {
|
layer.closeAll('loading');
|
if (res.code == 200) {
|
layer.open({
|
title: res.msg,
|
content: '链接：' + res.url,
|
btn: ['复制链接'],
|
btn1: function(index, layero){
|
var clipboard = new ClipboardJS(".layui-layer-btn0",{
|
text: function () {
|
return res.url;
|
}
|
});
|
clipboard.on('success', function (e) {
|
e.clearSelection();
|
layer.msg('分享地址已复制', {icon: 1});
|
});
|
clipboard.on('error', function (e) {
|
layer.msg('复制失败，请手动复制', {icon: 2});
|
});
|
}
|
});
|
}
|
});
|
layer.close(index);
|
});
|
});
|
|
// 选择删除
|
$('#btnSelectDel').click(function () {
|
layer.open({
|
type: 2,
|
title: '选择文件',
|
content: 'fileChoose.html?multi=true',
|
area: ['600px', '420px'],
|
offset: '50px',
|
shade: .1,
|
fixed: false,
|
resize: true,
|
end: function () {
|
if (typeof(mFsUrls) != "undefined" && mFsUrls.length > 0) {
|
layer.msg('你选择了：' + JSON.stringify(mFsUrls), {icon: 1});
|
mFsUrls = undefined;
|
}
|
}
|
});
|
});
|
|
// 新建文件夹
|
$('#btnNewDir').click(function () {
|
layer.prompt({
|
formType: 0,
|
value: "新建文件夹",
|
title: '文件名'
|
}, function(value, index, elem){
|
var curPos = $('#tvFP').text();
|
layer.load(2);
|
$.get(baseServer + 'api/mkdir', {
|
curPos: curPos,
|
dirName: value
|
}, function (res) {
|
layer.closeAll('loading');
|
if (res.code == 200) {
|
layer.msg(res.msg, {icon: 1});
|
renderList();
|
} else {
|
layer.msg(res.msg, {icon: 2});
|
}
|
});
|
layer.close(index);
|
});
|
});
|
|
// 删除当前目录
|
$('#btnDelDir').click(function () {
|
layer.confirm('将删除此目录下所有文件', {icon: 3, title:'确认'}, function(index){
|
var curPos = $('#tvFP').text().substr(1);
|
layer.load(2);
|
$.get(baseServer + 'api/del', {
|
file: curPos
|
}, function (res) {
|
layer.closeAll('loading');
|
if (res.code == 200) {
|
layer.msg(res.msg, {icon: 1});
|
renderList();
|
} else {
|
layer.msg(res.msg, {icon: 2});
|
}
|
});
|
layer.close(index);
|
});
|
});
|
|
// 重命名当前目录
|
$('#btnRname').click(function () {
|
var tvFP = $('#tvFP').text();
|
layer.prompt({
|
formType: 0,
|
value: tvFP,
|
title: '新目录名'
|
}, function(value, index, elem){
|
layer.load(2);
|
$.get(baseServer + 'api/rename', {
|
oldFile: tvFP.substr(1),
|
newFile: value.substr(1)
|
}, function (res) {
|
layer.closeAll('loading');
|
if (res.code == 200) {
|
layer.msg(res.msg, {icon: 1});
|
$('#tvFP').text(res.url);
|
renderList();
|
} else {
|
layer.msg(res.msg, {icon: 2});
|
}
|
});
|
layer.close(index);
|
});
|
});
|
|
});
|
</script>
|
</body>
|
</html>
|
