3 Star 0 Fork 0

男神会/superfile-electron

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
克隆/下载
index1.html 17.62 KB
一键复制 编辑 原始数据 按行查看 历史
张文权 提交于 2020-12-18 10:30 . bucket
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>文件批量重命名</title>
<link rel="stylesheet" href="css/layui.css">
<script src="js/vue.js"></script>
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="./static/css/font.css">
<link rel="stylesheet" href="./static/css/weadmin.css">
</head>
<body>
<script src="js/layui.js"></script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<div class="container" id="user">
<div class="logo">
<a href="./index2.html">superFile</a>
</div>
<ul class="layui-nav right" lay-filter="">
<li class="layui-nav-item">
<a href="javascript:;">{{username}}</a>
<dl class="layui-nav-child">
<!-- 二级菜单 -->
<!-- <dd>
<a onclick="WeAdminShow('个人信息','http://www.baidu.com')">个人信息</a>
</dd> -->
<dd>
<a class="loginout" href="./login.html">退出</a>
</dd>
</dl>
</li>
<li class="layui-nav-item to-index">
<a href="./index2.html" target="_blank">首页</a>
</li>
</ul>
</div>
<!-- tap -->
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief" id="page">
<ul class="layui-tab-title" style="position: fixed;">
<li class="layui-this">文件下载</li>
<li>文件上传</li>
<li>文件重命名</li>
</ul>
<div class="layui-tab-content" style="height: 100px;">
<div class="layui-tab-item layui-show">
<!-- 文件下载 -->
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend></legend>
</fieldset>
<table class="layui-hide" id="test" lay-filter="test"></table>
</div>
<div class="layui-tab-item">
<!-- 文件上传 -->
<div style="width:1000px;margin: 0 auto;">
<form class="layui-form">
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend></legend>
</fieldset>
<div class="layui-upload-drag" id="testList" style="width: 300px;margin: 0 auto;display: block;">
<i class="layui-icon"></i>
<p>点击上传,或将文件拖拽到此处</p>
<div class="layui-hide" id="uploadDemoView">
<hr>
<img src="" alt="上传成功后渲染" style="max-width: 196px">
</div>
</div>
<div class="layui-upload">
<div class="layui-upload-list">
<table class="layui-table">
<thead>
<tr>
<th>文件名</th>
<th>大小</th>
<th>状态</th>
<th>操作</th>
</tr>
</thead>
<tbody id="demoList"></tbody>
</table>
</div>
<form class="layui-form" action="">
<div class="layui-inline">
<label class="layui-form-label">类型</label>
<div class="layui-input-inline">
<input type="text" name="number" v-model="input1" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">姓名</label>
<div class="layui-input-inline">
<input type="text" name="number" v-model="input2" autocomplete="off" class="layui-input">
</div>
</div>
</form>
</div>
<button type="button" class="layui-btn" id="testListAction">开始上传</button>
</form>
</div>
</div>
<!-- 文件重命名 -->
<div class="layui-tab-item">
<div style="width:1000px;margin: 0 auto;margin-top: 50px;">
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">输入框</label>
<div class="layui-input-block">
<input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</form>
</div>
</div>
</div>
</div>
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-event="getCheckData">批量删除</button>
<button class="layui-btn layui-btn-sm" lay-event="getCheckLength">批量下载</button>
<!-- <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button> -->
</div>
</script>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="edit" >下载</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<!-- 文件上传 -->
<script>
var bucketId = window.localStorage.bucketId
var url = 'http://localhost:8081'
// var preViewUrl = 'http://localhost:8012'
var preViewUrl = 'http://iamhero.top:8012'
var page = new Vue({
el: '#page',
data: {
input1: '',
input2: ''
}
})
var user = new Vue({
el: '#user',
data: {
username: window.localStorage.username
},
methods: {
}
})
$(function () {
});
//获取url参数
function getQueryVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split("=");
if (pair[0] == variable) { return pair[1]; }
}
return (false);
}
layui.use('upload', function () {
var $ = layui.jquery
, upload = layui.upload;
var Authorization = window.localStorage.Authorization
//多文件列表
var demoListView = $('#demoList')
, uploadListIns = upload.render({
elem: '#testList'
, url: url + '/file'
, headers: {
Authorization: Authorization
}
, multiple: true
, data: {
bucketId: bucketId,
fileName: page.input1 == '' ? '' : page.input1 + '-' + page.input2 == '' ? "" : page.input2 + '-',
Authorization: Authorization
}
, accept: 'file'
, auto: false
, bindAction: '#testListAction'
, height: 530
, choose: function (obj) {
console.log("ces" + bucketId)
var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
// jsReadFiles(this.files)
// page.show = true
//读取本地文件
obj.preview(function (index, file, result) {
var tr = $(['<tr id="upload-' + index + '">'
, '<td>' + file.name + '</td>'
, '<td>' + (file.size / 1024).toFixed(1) + 'kb</td>'
, '<td>等待上传</td>'
, '<td>'
, '<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
, '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
, '</td>'
, '</tr>'].join(''));
//单个重传
tr.find('.demo-reload').on('click', function () {
obj.upload(index, file);
});
//删除
tr.find('.demo-delete').on('click', function () {
delete files[index]; //删除对应的文件
// console.log("this",files)
// console.log(empty(files))
// if(empty(this.files)){
// page.show = false
// }
tr.remove();
uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值,以免删除后出现同名文件不可选
});
demoListView.append(tr);
// var uploadInst = upload.render({
// elem: '#testList'
// });
});
// console.log("aaa", page.input1)
uploadListIns.reload({
data: {
bucketId: bucketId,
fileName: page.input1 == '' ? '' : page.input1 + '-' + page.input2 == '' ? "" : page.input2 + '-',
Authorization: Authorization
}
})
}
, done: function (res, index, upload) {
// console.log("res",res)
if (res.code == 200) { //上传成功
var tr = demoListView.find('tr#upload-' + index)
, tds = tr.children();
tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
// tds.eq(3).html('<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'); //清空操作
return delete this.files[index]; //删除文件队列已经上传成功的文件
}
this.error(index, upload);
}
, error: function (index, upload) {
var tr = demoListView.find('tr#upload-' + index)
, tds = tr.children();
tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
}
});
});
</script>
<!-- 下载 -->
<script>
var table;
var Authorization = window.localStorage.Authorization
layui.use('table', function () {
table = layui.table;
table.render({
elem: '#test'
, url: url + '/file?bucketId=' + bucketId
, headers: {
Authorization: Authorization
}
, toolbar: '#toolbarDemo' //开启头部工具栏,并为其绑定左侧模板
, defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义,去除该参数即可
title: '提示'
, layEvent: 'LAYTABLE_TIPS'
, icon: 'layui-icon-tips'
}]
, height: 530
, title: '用户数据表'
, parseData: function (res) { //res 即为原始返回的数据
return {
"code": res.code == 200 ? 0 : res.code, //解析接口状态
"msg": res.msg, //解析提示文本
"count": res.count, //解析数据长度
"data": res.data //解析数据列表
};
}
, cols: [[
{ type: 'checkbox', fixed: 'left' }
, { field: 'fileName', title: '文件名', fixed: 'left', unresize: true, sort: true }
, { field: 'size', title: '文件大小', sort: true }
, { field: 'time', title: '文件修改时间', }
, {
fixed: 'right', title: '操作', templet: function (res) {
return '<a class="layui-btn layui-btn-xs" lay-event="down" >下载</a>' +
'<a class="layui-btn layui-btn-xs" lay-event="edit" >编辑</a>' +
'<a class="layui-btn layui-btn-xs" lay-event="view" >预览</a>' +
'<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>'
}
}
]]
, page: true
});
//头工具栏事件
table.on('toolbar(test)', function (obj) {
var checkStatus = table.checkStatus(obj.config.id);
switch (obj.event) {
case 'getCheckData':
if(checkStatus.data.length == 0){
layer.msg("至少选中一行")
return
}
layer.confirm('确认删除吗?', { icon: 3, title: '提示' }, function (index) {
var data = checkStatus.data;
// layer.alert(JSON.stringify(data));
$.ajax({
type: "POST",
url: url + '/file/delete',
contentType: 'application/json;charset=utf-8',
headers: {
Authorization: Authorization
},
data: JSON.stringify(data)
});
// for (let i = 0; i < checkStatus.length; i++) {
// layer.close(checkStatus[i]);
// }
var Authorization = window.localStorage.Authorization
if (data.index == 0) {
table.reload('test', {
url: url + "/file?bucketId=" + bucketId
, where: {} //设定异步数据接口的额外参数
, height: 530
, page: {
curr: 1 //重新从第 1 页开始
}, headers: {
Authorization: Authorization
}
});
}
layer.close(index)
})
break;
case 'getCheckLength':
var data = checkStatus.data;
layer.msg('选中了:' + data.length + '');
break;
case 'isAll':
layer.msg(checkStatus.isAll ? '全选' : '未全选');
break;
//自定义头工具栏右侧图标 - 提示
case 'LAYTABLE_TIPS':
layer.alert('这是工具栏右侧自定义的一个图标按钮');
break;
};
});
//监听行工具事件
table.on('tool(test)', function (obj) {
var data = obj.data;
console.log(obj.data)
if (obj.event === 'del') {
layer.confirm('真的删除该文件吗', function (index) {
console.log(data)
var fileInfoList = new Array();
fileInfoList.push({
bucketId: data.bucketId,
fileId: data.fileId
})
var list = JSON.stringify(fileInfoList);
obj.del();
$.ajax({
type: "POST",
url: url + '/file/delete',
contentType: 'application/json;charset=utf-8',
headers: {
Authorization: Authorization
},
// contentType : 'application/json',
// dataType: 'json',
data: list
});
layer.close(index);
});
} else if (obj.event === 'down') {
window.location.href = url + "/down?bucketId=" + data.bucketId + "&fileId=" + data.fileId
} else if (obj.event === 'edit') {
layer.prompt({
formType: 2
, value: data.fileName
}, function (value, index) {
obj.update({
fileName: value
});
layer.close(index);
$.ajax({
type: "POST",
url: url + '/file/update',
contentType: 'application/json;charset=utf-8'
, headers: {
Authorization: Authorization
},
data: JSON.stringify({
bucketId: data.bucketId,
fileId: data.fileId,
fileName: value
}),
success: function (res) {
},
});
});
} else if (obj.event === 'view') {
$.ajax({
type: "GET",
url: url + '/file/url',
contentType: 'application/json;charset=utf-8',
headers: {
Authorization: Authorization
},
data: {
bucketId: data.bucketId,
fileId: data.fileId
},
success: function (res) {
// window.open('http://127.0.0.1:8012/onlinePreview?url=' + "http://localhost:8081/file/down?bucketId="+data.bucketId+"&fileId="+data.fileId);
// window.open('http://127.0.0.1:8012/onlinePreview?url=' +encodeURIComponent(res.data));
layer.open({
type: 2,
skin: 'layui-layer-demo', //样式类名
title: '标题',
closeBtn: 0, //不显示关闭按钮
anim: 2,
area: ['893px', '600px'],
shadeClose: true, //开启遮罩关闭
content: preViewUrl + '/onlinePreview?url=' + encodeURIComponent(res.data)
});
},
});
}
});
});
</script>
<script>
layui.use('element', function () {
var $ = layui.jquery
, element = layui.element; //Tab的切换功能,切换事件监听等,需要依赖element模块
element.on('tab(docDemoTabBrief)', function (data) {
// console.log(this); //当前Tab标题所在的原始DOM元素
console.log(data.index); //得到当前Tab的所在下标
var Authorization = window.localStorage.Authorization
if (data.index == 0) {
table.reload('test', {
url: url + "/file?bucketId=" + bucketId
, where: {} //设定异步数据接口的额外参数
, height: 530
, page: {
curr: 1 //重新从第 1 页开始
}, headers: {
Authorization: Authorization
}
});
}
// console.log(data.elem); //得到当前的Tab大容器
});
});
</script>
</body>
</html>
Loading...
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
1
https://gitee.com/hlwzz/superfile-electron.git
git@gitee.com:hlwzz/superfile-electron.git
hlwzz
superfile-electron
superfile-electron
master

搜索帮助