每日日报2021.10.27
完成内容：
1.编写大作业第一阶段
dao
<!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="./layui/css/layui.css">
</head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.2.2/dist/css/uikit.min.css" />
<style type="text/css">
.UpFileDivd{
height: 200px;
width: 300px;
position: absolute;
top: 20px;
bottom: 0;
left: 500px;
right: 0;
}
.UpTable{
top: 260px;
left: 100px;
position: absolute;
}
</style>
<!-- UIkit JS -->
<script src="https://cdn.jsdelivr.net/npm/uikit@3.2.2/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.2.2/dist/js/uikit-icons.min.js"></script>
<body>
<script>
var FileList=new Array()
</script>
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo layui-hide-xs layui-bg-black">字典管理</div>
<!-- 头部区域（可配合layui 已有的水平导航） -->
</div>
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed">
<a class="" href="javascript:;" >数据集管理</a>
<dl class="layui-nav-child">
<dd><a href="UserDataIn.html" class="layui-bg-green">数据集导入</a></dd>
<dd><a href="UserHisData.html" >历史数据集</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="UserDBManage.html" id="group2">数据库管理</a>
</li>
</ul>
</div>
</div>
<div class="layui-body" >
<div class="UpFileDivd" align="center">
<div class="layui-upload-drag" id="test10">
<i class="layui-icon"></i>
<p>点击上传，或将文件拖拽到此处</p>
<div class="layui-hide" id="uploadDemoView">
<hr>
<img src="" alt="上传成功后渲染" style="max-width: 196px">
</div>
</div>
</br></br>
<button id="UpBtn" class="layui-btn" >上传</button>
</div>
<div class="UpTable">
<div class="layui-upload-list" style="max-width: 1000px;">
<table class="layui-table">
<colgroup>
<col width="400">
<col width="150">
<col width="260">
<col width="150">
</colgroup>
<thead>
<tr><th>文件名</th>
<th>大小</th>
<th>上传进度</th>
<th>操作</th>
</tr></thead>
<tbody id="demoList"></tbody>
</table>
</div>
</div>
</div>
<div class="layui-footer">
</div>
</div>
<script src="./layui/layui.js"></script>
<script>
//JS
layui.use(['element', 'layer', 'util'], function(){
var element = layui.element
,layer = layui.layer
,util = layui.util
,$ = layui.$;
//头部事件
util.event('lay-header-event', {
//左侧菜单事件
menuLeft: function(othis){
layer.msg('展开左侧菜单的操作', {icon: 0});
}
,menuRight: function(){
layer.open({
type: 1
,content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
,area: ['260px', '100%']
,offset: 'rt' //右上角
,anim: 5
,shadeClose: true
});
}
});
});
</script>
<script>
layui.use(['upload', 'element', 'layer'], function(){
var $ = layui.jquery
,upload = layui.upload
,element = layui.element
,layer = layui.layer;
upload.render({
elem: '#test10'
,elemList: $('#demoList')
,accept: 'file'
,auto: false
,bindAction:'#UpBtn'
,url: 'servlet?method=tecon' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
,done: function(res){
},choose: function(obj){
var that = this;
var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
//读取本地文件
obj.preview(function(index, file, result){
var strlist=file.name.split('.')
if(strlist[strlist.length-1]!="xlsx"&&strlist[strlist.length-1]!="csv"){
layer.alert('上传文件错误，上传xlsx或csv', function(index){
//do something
layer.close(index);
});
delete files[index];
}
else {
var tr = $(['<tr id="upload-'+ index +'">'
,'<td>'+ file.name +'</td>'
,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>'
,'<td><div class="layui-progress" lay-filter="progress-demo-'+ index +'"><div class="layui-progress-bar" lay-percent=""></div></div></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]; //删除对应的文件
tr.remove();
uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
});
that.elemList.append(tr);
element.render('progress'); //渲染新加的进度条组件
});
}
,done: function(res, index, upload){ //成功的回调
var that = this;
//if(res.code == 0){ //上传成功
var tr = that.elemList.find('tr#upload-'+ index)
,tds = tr.children();
tds.eq(3).html(''); //清空操作
delete this.files[index]; //删除文件队列已经上传成功的文件
return;
//}
this.error(index, upload);
}
,allDone: function(obj){ //多文件上传完毕后的状态回调
console.log(obj)
}
,error: function(index, upload){ //错误回调
var that = this;
var tr = that.elemList.find('tr#upload-'+ index)
,tds = tr.children();
tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
}
,progress: function(n, elem, e, index){ //注意：index 参数为 layui 2.6.6 新增
element.progress('progress-demo-'+ index, n + '%'); //执行进度条。n 即为返回的进度百分比
}
});
});
</script>
</body>
</html>
遇到问题：
无
目标：继续完成任务
浙公网安备 33010602011771号