iotcat
/
PyOne
mirror of https://github.com/IoTcat/PyOne.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
156 Commits
4 Branches
0 Tags
2.0 MiB
 
 
 
 
 
Tag: Branch: Tree: 09fc68e228
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '09fc68e228'
${ noResults }
PyOne/templates/admin/upload_local.html

368 lines
14 KiB
Raw Blame History

{%extends 'admin/layout.html'%} {%block content%}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/webuploader/0.1.1/webuploader.css">
<script src="https://cdn.jsdelivr.net/npm/webuploader@0.1.8/dist/webuploader.min.js"></script>
<script type="text/javascript" src="/static/js/hashmap.js"></script>
<style type="text/css">
.placeholder {
min-height: 350px;
padding-top: 178px;
text-align: center;
background: center 93px no-repeat;
color: #cccccc;
font-size: 18px;
position: relative;
}
.placeholder .webuploader-pick {
font-size: 18px;
background: #00b7ee;
border-radius: 3px;
line-height: 44px;
padding: 0 30px;
*width: 120px;
color: #fff;
display: inline-block;
margin: 0 auto 20px auto;
cursor: pointer;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
.placeholder .webuploader-pick-hover {
background: #00a2d4;
}
.placeholder .flashTip {
color: #666666;
font-size: 12px;
position: absolute;
width: 100%;
text-align: center;
bottom: 20px;
}
.placeholder .flashTip a {
color: #0785d1;
text-decoration: none;
}
.placeholder .flashTip a:hover {
text-decoration: underline;
}
</style>
<div class="mdui-container-fluid">
<div class="mdui-typo">
<h1> 本地文件上传至onedrive <small>本地文件->服务器->onedrive</small></h1>
</div>
<div class="mdui-panel" mdui-panel>
<div class="mdui-panel-item">
<div class="mdui-panel-item-header">
<div class="mdui-panel-item-title">上传列表</div>
</div>
<div class="mdui-panel-item-body mdui-panel-item-open" id="thelist">
<div class="mdui-table-fluid">
<table class="mdui-table" id="uploadTable">
<thead>
<tr>
<th>序号</th>
<th>文件名称</th>
<th>文件大小</th>
<th>本地->服务器上传状态</th>
<th>服务器->onedrive上传状态</th>
<th>操作</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<div class="mdui-panel-item-actions">
<!-- <div class="mdui-btn mdui-ripple" id="picker">选择文件</div> -->
<button class="mdui-btn mdui-ripple mdui-color-pink-accent mdui-center" id="btn">开始上传</button>
<div id="dndArea" class="placeholder">
<div id="picker"></div>
<p>选择文件或将文件拖到这里</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
var fileMd5;
var fileSuffix;
var $list=$("#thelist table>tbody");
var state = 'pending';//初始按钮状态
var $btn=$("#btn");
var count=0;
var map=new HashMap();
//监听分块上传过程中的三个时间点
WebUploader.Uploader.register({
"before-send-file" : "beforeSendFile",
"before-send" : "beforeSend",
"after-send-file" : "afterSendFile",
}, {
//时间点1：所有分块进行上传之前调用此函数
beforeSendFile : function(file) {
var deferred = WebUploader.Deferred();
var fileName=file.name;
//1、计算文件的唯一标记，用于断点续传
(new WebUploader.Uploader()).md5File(file, 0, 10 * 1024 * 1024)
.progress(function(percentage) {
$('#' + file.id).find("td.to_server").text("正在读取文件信息...");
}).then(function(val) {
fileMd5 = val;
$('#' + file.id).find("td.to_server").text("成功获取文件信息...");
//获取文件信息后进入下一步
deferred.resolve();
});
return deferred.promise();
},
//时间点2：如果有分块上传，则每个分块上传之前调用此函数
beforeSend : function(block) {
var deferred = WebUploader.Deferred();
$.ajax({
type : "POST",
url : "{{url_for('admin.checkChunk')}}",
data : {
//文件唯一标记
name:fileName,
fileMd5 : fileMd5,
//当前分块下标
chunk : block.chunk,
//当前分块大小
chunkSize : block.end - block.start
},
dataType : "json",
success : function(response) {
if (response.ifExist) {
//分块存在，跳过
deferred.reject();
} else {
//分块不存在或不完整，重新发送该分块内容
deferred.resolve();
}
}
});
this.owner.options.formData.fileMd5 = fileMd5;
deferred.resolve();
return deferred.promise();
},
//时间点3：所有分块上传成功后调用此函数
afterSendFile : function(file) {
//如果分块上传成功，则通知后台合并分块
(new WebUploader.Uploader()).md5File(file, 0, 10 * 1024 * 1024).then(function(val) {
fileMd5 = val;
});
$.ajax({
type : "POST",
url : "{{url_for('admin.mergeChunks')}}",
data : {
fileMd5 : fileMd5,
fileSuffix:file.ext,
fileName:file.name,
},
success : function(response) {
$('#' + file.id).find('td.to_server').text('已上传');
}
});
}
});
var uploader = WebUploader
.create({
// swf文件路径
swf : 'https://cdnjs.cloudflare.com/ajax/libs/webuploader/0.1.1/Uploader.swf',
// 文件接收服务端。
server : '{{ url_for("admin.recv_upload") }}',
// 选择文件的按钮。可选。
// 内部根据当前运行是创建，可能是input元素，也可能是flash.
pick : {
id : '#picker',//这个id是你要点击上传文件的id
multiple : true,
label: '点击选择文件'
},
// 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
resize : true,
auto : false,
//开启分片上传
chunked : true,
chunkSize : 4 * 1024 * 1024,
// accept : {
// extensions : 'csv,doc,docx,odp,ods,odt,pot,potm,potx,pps,ppsx,ppsxm,ppt,pptm,pptx,rtf,xls,xlsx,bmp,jpg,jpeg,png,gif,mp4,webm,avi,mpg,mpeg,rm,rmvb,mov,wmv,mkv,asf,avi mpg,mpeg,rm,rmvb,mov,wmv,mkv,asf,ogg,mp3,wav,exe,iso,txt,md,rst',
// mimeTypes : '.csv,.doc,.docx,.odp,.ods,.odt,.pot,.potm,.potx,.pps,.ppsx,.ppsxm,.ppt,.pptm,.pptx,.rtf,.xls,.xlsx,.bmp,.jpg,.jpeg,.png,.gif,.mp4,.webm,.avi,.mpg,.mpeg,.rm,.rmvb,.mov,.wmv,.mkv,.asf,.avi mpg,.mpeg,.rm,.rmvb,.mov,.wmv,.mkv,.asf,.ogg,.mp3,.wav,.exe,.iso,.txt,.md,.rst'
// },
dnd: '#dndArea',
disableGlobalDnd: true,
fileNumLimit: 300,
});
// 当有文件被添加进队列的时候
uploader.on('fileQueued', function(file) {
//保存文件扩展名
fileSuffix=file.ext;
fileName=file.source['name'];
var fileSize=file.size;
var fileSizeStr="";
/* if(fileSize/1024<1024){
fileSize=fileSize/1024;
fileSizeStr=fileSize.toFixed(2)+"KB";
}else if(fileSize/1024/1024<1024){
fileSize=fileSize/1024/1024;
fileSizeStr=fileSize.toFixed(2)+"MB";
}else if(fileSize/1024/1024/1024<1024){
fileSize=fileSize/1024/1024/1024;
fileSizeStr=fileSize.toFixed(2)+"GB";
}else{
fileSize=fileSize/1024/1024/1024/1024;
fileSizeStr=fileSize.toFixed(2)+"T";
} */
fileSizeStr=WebUploader.Base.formatSize(fileSize);
count++;
$list.append(
'<tr id="' + file.id + '" class="item" flag=0>'+
'<td class="index">' + count + '</td>'+
'<td class="info">' + file.name + '</td>'+
'<td class="size">' + fileSizeStr + '</td>'+
'<td class="to_server">等待上传...</td>'+
'<td class="to_one">等待上传...</td>'+
'<td class="operate"><button name="upload" class="mdui-btn mdui-color-theme-accent mdui-ripple">开始</button><button name="delete" class="mdui-btn mdui-color-theme-accent">删除</button></td></tr>');
map.put(file.id+"",file);
});
// 文件上传过程中创建进度条实时显示。
uploader.on('uploadProgress', function(file, percentage) {
$('#' + file.id).find('td.to_server').text(
'上传中 ' + Math.round(percentage * 100) + '%');
});
uploader.on('uploadSuccess', function(file) {
$('#' + file.id).find('td.to_server').text('已上传');
$('#' + file.id).find('td.to_one').text('准备上传...');
upload_to_one(file.id,file.name,"{{remote_folder}}");
});
uploader.on('uploadError', function(file) {
$('#' + file.id).find('td.to_server').text('上传出错');
});
uploader.on('uploadComplete', function(file) {
uploader.removeFile(file);
});
uploader.on('all', function(type) {
if (type === 'startUpload') {
state = 'uploading';
} else if (type === 'stopUpload') {
state = 'paused';
} else if (type === 'uploadFinished') {
state = 'done';
}
if (state === 'uploading') {
$btn.text('暂停上传');
} else {
$btn.text('开始上传');
}
});
$btn.on('click', function(){
if (state === 'uploading'){
uploader.stop(true);
} else {
uploader.upload();
}
});
$("body").on("click","#uploadTable button[name='upload']",function(){
flag=$(this).parents("tr.item").attr("flag")^1;
$(this).parents("tr.item").attr("flag",flag);
var id=$(this).parents("tr.item").attr("id");
if(flag==1){
$(this).text("暂停");
uploader.upload(uploader.getFile(id,true));
}else{
$(this).text("开始");
//uploader.stop(true);
uploader.stop(uploader.getFile(id,true));
//uploader.skipFile(file);
//uploader.removeFile(file);
//uploader.getFile(id,true);
}
});
$("body").on("click","#uploadTable button[name='delete']",function(){
var id=$(this).parents("tr.item").attr("id");
$(this).parents("tr.item").remove();
uploader.removeFile(uploader.getFile(id,true));
map.remove(id);
});
function upload_to_one(id,filename,remote_folder,user){
var source = new EventSource("{{url_for('admin.server_to_one')|safe}}?filename="+filename+"&remote_folder="+remote_folder+"&user={{cur_user}}");
source.onmessage = function(event) {
if(event.data=='end'){
source.close();
// $('#' + id).find('td.to_one').text('上传完成');
}
else{
$('#' + id).find('td.to_one').text(event.data);
}
}
source.addEventListener('error',function(e){
source.close();
})
}
//写cookies
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}
//读取cookies
function getCookie(name){
var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
if(arr=document.cookie.match(reg))
return (arr[2]);
else
return null;
}
//删除cookies
function delCookie(name){
var exp = new Date();
exp.setTime(exp.getTime() - 1);
var cval=getCookie(name);
if(cval!=null)
document.cookie= name + "="+cval+";expires="+exp.toGMTString();
}
$(document).ready(function(){
var ckname='folder_mode';
if(getCookie(ckname)!=null){
if(getCookie(ckname)==0){
$('#webuploader-element-invisible').attr('webkitdirectory','');
$('#folder_mode').removeAttr('checked');
}
else{
$('#webuploader-element-invisible').removeAttr('webkitdirectory');
$('#folder_mode').attr('checked','');
}
}
$('#folder_mode').change(function(){
if($(this).attr('checked')){
setCookie(ckname,0,1);
$('#webuploader-element-invisible').removeAttr('webkitdirectory');
}else{
setCookie(ckname,1,1);
$('#webuploader-element-invisible').attr('webkitdirectory','');
}
});
});
</script>
{%endblock content%}