mirror of
https://gitee.com/ulthon/ul-file-share.git
synced 2026-07-07 21:42:47 +08:00
完成文件上传管理
This commit is contained in:
augushong
@@ -2,105 +2,102 @@
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>登陆</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>登陆</title>
|
||||
|
||||
{include file="common/_require"}
|
||||
{include file="common/_require"}
|
||||
|
||||
<style>
|
||||
.login{
|
||||
margin-top: 20vh;
|
||||
}
|
||||
<style>
|
||||
.login {
|
||||
margin-top: 20vh;
|
||||
}
|
||||
|
||||
.title{
|
||||
text-align: center;
|
||||
font-size: 22px;
|
||||
line-height: 2;
|
||||
}
|
||||
</style>
|
||||
.title {
|
||||
text-align: center;
|
||||
font-size: 22px;
|
||||
line-height: 2;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<div class="ul-container">
|
||||
<div class="layui-container">
|
||||
<div class="layui-row">
|
||||
<div class="layui-col-md4 layui-col-md-offset4">
|
||||
<div class="login">
|
||||
<div class="title">
|
||||
{:get_system_config('site_name')}
|
||||
</div>
|
||||
<div>
|
||||
<form class="layui-form layui-form-pane" action="">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">用户名</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="account" required lay-verify="required"
|
||||
placeholder="请输入用户名" value="test(直接登陆即可)" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">密码</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="password" name="password" required lay-verify="required"
|
||||
placeholder="请输入密码" value="test(直接登陆即可)" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">验证码</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="captcha" required lay-verify="required"
|
||||
placeholder="请输入验证码" autocomplete="off" value="test(直接登陆即可)" class="layui-input">
|
||||
<img class="captcha" src="/api/Captcha/build" onclick="this.src = '/api/Captcha/build?v='+Math.random()" style="cursor: pointer;width:
|
||||
100%;" alt="">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
|
||||
<button class="layui-btn layui-btn-fluid" lay-submit lay-filter="login">登陆</button>
|
||||
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ul-container">
|
||||
<div class="layui-container">
|
||||
<div class="layui-row">
|
||||
<div class="layui-col-md4 layui-col-md-offset4">
|
||||
<div class="login">
|
||||
<div class="title">
|
||||
{:get_system_config('site_name')}
|
||||
</div>
|
||||
<div>
|
||||
<form class="layui-form layui-form-pane" action="">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">用户名</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="account" required lay-verify="required" placeholder="请输入用户名" value="" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">密码</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="password" name="password" required lay-verify="required" placeholder="请输入密码" value="" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">验证码</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="captcha" required lay-verify="required" placeholder="请输入验证码" autocomplete="off" value="" class="layui-input">
|
||||
<img class="captcha" src="/api/Captcha/build" onclick="this.src = '/api/Captcha/build?v='+Math.random()" style="cursor: pointer;width:
|
||||
100%;" alt="">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
|
||||
<button class="layui-btn layui-btn-fluid" lay-submit lay-filter="login">登陆</button>
|
||||
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
layui.use(['form','layer'],function(){
|
||||
var form = layui.form;
|
||||
|
||||
var loadLayer = null;
|
||||
<script>
|
||||
layui.use(['form', 'layer'], function () {
|
||||
var form = layui.form;
|
||||
|
||||
form.on('submit(login)',function(data){
|
||||
loadLayer = layer.load(2);
|
||||
$.post('{:url("admin/Login/auth")}',data.field,function(result){
|
||||
layer.close(loadLayer);
|
||||
if(result.code == 0){
|
||||
layer.msg('登陆成功');
|
||||
setTimeout(() => {
|
||||
location.href = '{:url("admin/Index/index")}'
|
||||
}, 1200);
|
||||
}else{
|
||||
$('.captcha').click()
|
||||
layer.msg(result.msg);
|
||||
}
|
||||
})
|
||||
var loadLayer = null;
|
||||
|
||||
return false;
|
||||
})
|
||||
form.on('submit(login)', function (data) {
|
||||
loadLayer = layer.load(2);
|
||||
$.post('{:url("admin/Login/auth")}', data.field, function (result) {
|
||||
layer.close(loadLayer);
|
||||
if (result.code == 0) {
|
||||
layer.msg('登陆成功');
|
||||
setTimeout(() => {
|
||||
location.href = '{:url("admin/Index/index")}'
|
||||
}, 1200);
|
||||
} else {
|
||||
$('.captcha').click()
|
||||
layer.msg(result.msg);
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
return false;
|
||||
})
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
15
view/index/common/_require.html
Normal file
15
view/index/common/_require.html
Normal file
@@ -0,0 +1,15 @@
|
||||
<link rel="stylesheet" href="//layui.ulthon.com/cdn/layui-ul-change.css">
|
||||
<link rel="stylesheet" href="//layui.ulthon.com/cdn/layui-ul.css">
|
||||
<link rel="shortcut icon" href="{:get_source_link(get_system_config('site_favicon','/favicon.ico'))}" type="image/x-icon">
|
||||
<link rel="stylesheet" href="/static/css/reset.css">
|
||||
<link rel="stylesheet" href="/static/css/pagination.css">
|
||||
<link rel="stylesheet" href="/static/lib/layui/css/layui.css">
|
||||
<link rel="stylesheet" href="/static/css/{$Request.cookie.skin_name|default='skin-1'}.css">
|
||||
<link rel="stylesheet" href="/static/css/common.css">
|
||||
<link rel="stylesheet" href="/static/css/index.css">
|
||||
<script src="/static/lib/jquery/jquery-3.4.1.min.js"></script>
|
||||
<script src="/static/lib/jquery/jquery.cookie.js"></script>
|
||||
<script src="/static/lib/layui/layui.js"></script>
|
||||
<script src="/static/js/common.js"></script>
|
||||
|
||||
{:get_system_config('site_tongji')}
|
||||
@@ -2,32 +2,240 @@
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>{:get_system_config('site_name')}</title>
|
||||
{:get_system_config('site_tongji')}
|
||||
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{:get_system_config('site_name')}</title>
|
||||
{include file='common/_require'/}
|
||||
|
||||
<!-- <link rel="stylesheet" href="/static/lib/webuploader/webuploader.css"> -->
|
||||
|
||||
<style>
|
||||
.webuploader-element-invisible {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
<script src="/static/lib/webuploader/webuploader.min.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<textarea id="README" style="display: none">
|
||||
{:file_get_contents(app()->getRootPath().'README.md')}
|
||||
</textarea>
|
||||
<div class="ul-header ">
|
||||
<div class="ul-header-main" style="max-width: 1000px;padding: 0 15px">
|
||||
|
||||
<div id="README-PRE" style="max-width: 800px;margin: 0 auto">
|
||||
<div class="ul-header-left">
|
||||
<div class="">
|
||||
<img class="ul-header-logo" src="{:get_source_link(get_system_config('site_logo'))}" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="ul-header-right">
|
||||
<div class="ul-header-user">
|
||||
<div class="ul-header-user-avatar">
|
||||
|
||||
</div>
|
||||
<div class="ul-header-user-info">
|
||||
<div class="ul-header-user-name">
|
||||
奥古斯宏
|
||||
</div>
|
||||
<div class="ul-header-user-options">
|
||||
<i class="ul-icon-exit"></i>
|
||||
<span>退出</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
|
||||
<script src="https://cdn.bootcss.com/markdown-it/9.1.0/markdown-it.min.js"></script>
|
||||
<script>
|
||||
var md = window.markdownit();
|
||||
var result = md.render($('#README').val());
|
||||
$('#README-PRE').html(result)
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="layui-container" style="margin-top: 15px;;">
|
||||
<div class="layui-row">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">发送文件</div>
|
||||
<div class="layui-card-body">
|
||||
<div class="file-list">
|
||||
|
||||
</div>
|
||||
<div class="file-options">
|
||||
<form class="layui-form layui-form-pane" action="">
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<div class="layui-btn-container">
|
||||
<div class="layui-btn " id="picker">选择文件</div>
|
||||
<button class="layui-btn submit" type="submit" lay-filter="submit" lay-submit>提交分享</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">密码</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="password" name="password" autocomplete="off" placeholder="可以为空" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">下载次数</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="number" name="times" autocomplete="off" placeholder="不限制下载次数" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">保存时长</label>
|
||||
<div class="layui-input-inline">
|
||||
<select name="expire" lay-verify="">
|
||||
<option value="3600">1小时</option>
|
||||
<option value="10800">3小时</option>
|
||||
<option value="28800">8小时</option>
|
||||
<option value="86400">24小时</option>
|
||||
<option value="259200">3天</option>
|
||||
<option value="604800">7天</option>
|
||||
<option value="0" disabled>永久</option>
|
||||
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: none;" class="tpl">
|
||||
<div class="file-item">
|
||||
<div class="file-info">
|
||||
<span class="file-name">3600.zip</span>
|
||||
<span class="file-size">16k</span>
|
||||
</div>
|
||||
|
||||
<div class="file-options" style="display: flex;">
|
||||
<span class="file-progress">等待上传</span>
|
||||
<div class="layui-btn-container">
|
||||
<i class="option-item layui-btn layui-btn-xs delete">删除</i>
|
||||
<!-- <i class="option-item layui-btn layui-btn-xs pause" style="display: none;">暂停</i> -->
|
||||
<!-- <i class="option-item layui-btn layui-btn-xs start" style="display: none;">继续</i> -->
|
||||
<i class="option-item layui-btn layui-btn-xs retry" style="display: none;">重新上传</i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var BASE_URL = '/static/lib/webuploader'
|
||||
var uploader = WebUploader.create({
|
||||
auto: true,
|
||||
// swf文件路径
|
||||
swf: BASE_URL + '/Uploader.swf',
|
||||
paste: document.body,
|
||||
dnd: '.file-list',
|
||||
fileVal: 'file',
|
||||
disableGlobalDnd: true,
|
||||
// 文件接收服务端。
|
||||
server: '{:url("File/webSave")}',
|
||||
|
||||
// 选择文件的按钮。可选。
|
||||
// 内部根据当前运行是创建，可能是input元素，也可能是flash.
|
||||
pick: '#picker',
|
||||
|
||||
// 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
|
||||
resize: false
|
||||
});
|
||||
|
||||
uploader.on('fileQueued', function (file) {
|
||||
|
||||
var fileDom = $('.tpl .file-item').clone()
|
||||
|
||||
fileDom.addClass('file-item-' + file.id)
|
||||
|
||||
fileDom.find('.file-name').text(file.name)
|
||||
|
||||
fileDom.find('.file-size').text(formatSize(file.size))
|
||||
|
||||
fileDom.appendTo('.file-list')
|
||||
fileDom.find('.option-item').hide()
|
||||
fileDom.find('.delete').click(function () {
|
||||
uploader.removeFile(file, true);
|
||||
fileDom.remove()
|
||||
}).show();
|
||||
fileDom.find('.retry').click(function () {
|
||||
uploader.retry(file)
|
||||
})
|
||||
fileDom.find('.start').click(function () {
|
||||
uploader.upload(file)
|
||||
})
|
||||
fileDom.find('.pause').click(function () {
|
||||
fileDom.find('.option-item').hide()
|
||||
fileDom.find('.start').show()
|
||||
uploader.stop(file)
|
||||
|
||||
})
|
||||
});
|
||||
|
||||
uploader.on('uploadProgress', function (file, percentage) {
|
||||
var percentTitle = parseInt(percentage * 100) + '%';
|
||||
$('.file-item-' + file.id).find('.file-progress').text(percentTitle)
|
||||
})
|
||||
uploader.on('uploadStart', function (file) {
|
||||
$('.file-item-' + file.id).find('.option-item').hide()
|
||||
$('.file-item-' + file.id).find('.pause').show()
|
||||
$('.file-item-' + file.id).find('.delete').show()
|
||||
})
|
||||
uploader.on('uploadError', function (file, reason) {
|
||||
$('.file-item-' + file.id).find('.file-progress').text('上传错误:' + reason)
|
||||
$('.file-item-' + file.id).find('.option-item').hide()
|
||||
$('.file-item-' + file.id).find('.retry').show()
|
||||
$('.file-item-' + file.id).find('.delete').show()
|
||||
})
|
||||
uploader.on('uploadSuccess', function (file, reason) {
|
||||
$('.file-item-' + file.id).find('.file-progress').text('上传成功');
|
||||
$('.file-item-' + file.id).data('success', reason.data);
|
||||
$('.file-item-' + file.id).addClass('success')
|
||||
|
||||
$('.file-item-' + file.id).find('.option-item').hide()
|
||||
$('.file-item-' + file.id).find('.delete').show()
|
||||
})
|
||||
|
||||
layui.form.on('submit(submit)', function (data) {
|
||||
|
||||
if (uploader.isInProgress()) {
|
||||
|
||||
layer.msg("正在上传中,请等待上传完成后操作");
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
if ($('.file-list .file-item').length == 0) {
|
||||
layer.msg('请选择上传文件')
|
||||
return false;
|
||||
}
|
||||
|
||||
if ($('.file-list .file-item').length != $('.file-list .file-item.success').length) {
|
||||
|
||||
layer.msg('部分文件上传失败,请重新上传或从队列中删除')
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
var fileList = []
|
||||
|
||||
$('.file-list .file-item').each(function(index,elem){
|
||||
var fileData = $(elem).data('success')
|
||||
console.log(fileData);
|
||||
fileList.push(fileData)
|
||||
})
|
||||
|
||||
data.field.file_list = fileList
|
||||
|
||||
console.log(data.field);
|
||||
return false;
|
||||
})
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user