335 lines
12 KiB
JavaScript
335 lines
12 KiB
JavaScript
let dropbox = document.getElementById("terms"); //要监听拖动上传的节点
|
||
|
||
let fileDrop = {
|
||
startTime: 0,
|
||
endTime: 0,
|
||
uploadLength: 0, //上传数量
|
||
//splitSize: 1024 * 1024 * 2, //文件上传分片大小
|
||
filesList: [], // 文件列表数组
|
||
errorLength: 0, //上传失败文件数量
|
||
isUpload: true, //上传状态，是否可以上传
|
||
uploadSuspend: false, //上传暂停参数
|
||
isUploadNumber: 150,//限制单次上传数量
|
||
uploadAllSize: 0, // 上传文件总大小
|
||
uploadedSize: 0, // 已上传文件大小
|
||
topUploadedSize: 0, // 上一次文件上传大小
|
||
uploadExpectTime: 0, // 预计上传时间
|
||
//initTimer:0, // 初始化计时
|
||
speedInterval: null, //平局速度定时器
|
||
timerSpeed: 0, //速度
|
||
uploading: false,
|
||
cancel: false,
|
||
done: false,
|
||
}
|
||
|
||
function file_init() {
|
||
fileDrop = {
|
||
startTime: 0,
|
||
endTime: 0,
|
||
uploadLength: 0, //上传数量
|
||
//splitSize: 1024 * 1024 * 2, //文件上传分片大小
|
||
filesList: [], // 文件列表数组
|
||
errorLength: 0, //上传失败文件数量
|
||
isUpload: true, //上传状态，是否可以上传
|
||
//uploadSuspend:[], //上传暂停参数
|
||
isUploadNumber: 800,//限制单次上传数量
|
||
uploadAllSize: 0, // 上传文件总大小
|
||
uploadedSize: 0, // 已上传文件大小
|
||
topUploadedSize: 0, // 上一次文件上传大小
|
||
uploadExpectTime: 0, // 预计上传时间
|
||
//initTimer:0, // 初始化计时
|
||
speedInterval: null, //平局速度定时器
|
||
timerSpeed: 0, //速度
|
||
uploading: false,
|
||
cancel: false,
|
||
}
|
||
}
|
||
|
||
dropbox.addEventListener("dragleave", function (e) {
|
||
//e.stopPropagation();
|
||
e.preventDefault();
|
||
}, false);
|
||
|
||
dropbox.addEventListener("dragenter", function (e) {
|
||
//e.stopPropagation();
|
||
e.preventDefault();
|
||
}, false);
|
||
|
||
dropbox.addEventListener("dragover", function (e) {
|
||
//e.stopPropagation();
|
||
e.preventDefault();
|
||
}, false);
|
||
|
||
dropbox.addEventListener("drop", changes, false);
|
||
|
||
function changes(e) {
|
||
if (!sftp_ready) {
|
||
layer.msg("请等待服务器连接！")
|
||
return false
|
||
}
|
||
e.preventDefault();
|
||
let items = e.dataTransfer.items, time, num = 0
|
||
if (fileDrop.uploading) {
|
||
layer.msg("已有文件队列上传中")
|
||
return false
|
||
}
|
||
if (items && items.length && items[0].webkitGetAsEntry != null) {
|
||
if (items[0].kind != 'file') return false;
|
||
}
|
||
if (fileDrop.filesList == null) fileDrop.filesList = []
|
||
for (let i = fileDrop.filesList.length - 1; i >= 0; i--) {
|
||
if (fileDrop.filesList[i].is_upload) fileDrop.filesList.splice(-i, 1)
|
||
}
|
||
|
||
function update_sync(s) {
|
||
s.getFilesAndDirectories().then(function (subFilesAndDirs) {
|
||
return iterateFilesAndDirs(subFilesAndDirs, s.path);
|
||
});
|
||
}
|
||
|
||
let iterateFilesAndDirs = function (filesAndDirs, path) {
|
||
for (let i = 0; i < filesAndDirs.length; i++) {
|
||
if (typeof (filesAndDirs[i].getFilesAndDirectories) == 'function') {
|
||
update_sync(filesAndDirs[i])
|
||
} else {
|
||
if (num > fileDrop.isUploadNumber) {
|
||
//fileDrop.isUpload = false;
|
||
layer.msg(' ' + fileDrop.isUploadNumber + '份，无法上传,请压缩后上传!。', {icon: 2, area: '405px'});
|
||
//clearTimeout(time);
|
||
file_init()
|
||
return false;
|
||
}
|
||
fileDrop.filesList.push({
|
||
file: filesAndDirs[i],
|
||
path: path,
|
||
name: filesAndDirs[i].name.replace('//', '/'),
|
||
local: (path == "/" ? "" : path) + "/" + filesAndDirs[i].name.replace('//', '/'),
|
||
size: to_size(filesAndDirs[i].size),
|
||
upload: 0, //上传状态,未上传：0、上传中：1，已上传：2，上传失败：-1
|
||
is_upload: false
|
||
});
|
||
fileDrop.uploadAllSize += filesAndDirs[i].size
|
||
fileDrop.uploadLength++;
|
||
}
|
||
}
|
||
}
|
||
if ('getFilesAndDirectories' in e.dataTransfer) {
|
||
e.dataTransfer.getFilesAndDirectories().then(function (filesAndDirs) {
|
||
return iterateFilesAndDirs(filesAndDirs, '/');
|
||
});
|
||
}
|
||
//console.log(fileDrop.filesList)
|
||
layer.load(1, {
|
||
shade: [0.1, '#fff'] //0.1透明度的白色背景
|
||
});
|
||
getpwd(getpwd_callback) //采用回调函数的方式检查SFTP服务是否可用
|
||
}
|
||
|
||
function getpwd_callback(msg) {
|
||
server_pwd = msg.data
|
||
setTimeout(function () {
|
||
layer.closeAll('loading')
|
||
open_upload_window()
|
||
}, 1500)
|
||
}
|
||
|
||
function open_upload_window() {
|
||
//console.log(fileDrop.filesList[0])
|
||
let template = `
|
||
<table class="layui-table" lay-even="" lay-skin="row" id="file_upload" style="table-layout: fixed;padding-top: 0">
|
||
<colgroup>
|
||
<col width="35%">
|
||
<col width="35%">
|
||
<col width="30%">
|
||
<col>
|
||
</colgroup>
|
||
<thead>
|
||
<tr>
|
||
<th>文件路径（共` + fileDrop.uploadLength + `个文件）</th>
|
||
<th>文件大小（共` + to_size(fileDrop.uploadAllSize) + `）</th>
|
||
<th>文件状态</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody align="center">
|
||
|
||
</tbody>
|
||
</table>
|
||
`
|
||
layer.open({
|
||
type: 1,
|
||
closeBtn: 1,
|
||
maxmin: true,
|
||
area: ['550px', '455px'],
|
||
btn: [fileDrop.uploadSuspend ? "继续上传" : "开始上传", '取消上传'],
|
||
title: '上传文件到：' + session_path,
|
||
skin: 'file_dir_uploads',
|
||
shade: 0.4,
|
||
shadeClose: false,
|
||
content: template,
|
||
success: function () {
|
||
for (let i = 0; i < fileDrop.filesList.length; i++) {
|
||
$("#file_upload tbody").append(create_row(i, fileDrop.filesList[i]));
|
||
}
|
||
},
|
||
yes: function (index) {
|
||
if (fileDrop.filesList.length <= 0) {
|
||
layer.msg("请选择要上传的文件！", {icon: 0})
|
||
file_init()
|
||
layer.close(index)
|
||
return false
|
||
}
|
||
if (fileDrop.uploading && fileDrop.uploadSuspend == false) {
|
||
return false
|
||
}
|
||
//console.log("开始上传")
|
||
$('.layui-layer-btn0').css({
|
||
'cursor': 'no-drop',
|
||
'background': '#4e8ccc'
|
||
}).attr('data-upload', 'true').text('上传中');
|
||
fileDrop.uploadSuspend = false
|
||
fileDrop.uploading = true
|
||
start_upload()
|
||
},
|
||
btn2: function (index) {
|
||
if(fileDrop.done){
|
||
layer.close(index);
|
||
file_init()
|
||
return false
|
||
}
|
||
if (fileDrop.uploading) {
|
||
layer.confirm('是否取消上传当前列表的文件，若取消上传，已上传的文件，需用户手动删除，是否取消上传？', {
|
||
title: '取消上传文件',
|
||
icon: 0,
|
||
btn: ['取消上传', '继续上传']
|
||
}, function (indexs) {
|
||
layer.close(index);
|
||
layer.close(indexs);
|
||
file_init()
|
||
}, function () {
|
||
fileDrop.uploadSuspend = true //开启暂停标识，用于继续上传功能
|
||
open_upload_window()
|
||
});
|
||
//return false;
|
||
} else {
|
||
layer.close(index);
|
||
file_init()
|
||
}
|
||
},
|
||
cancel: function (index) {
|
||
if(fileDrop.done){
|
||
layer.close(index);
|
||
file_init()
|
||
return false
|
||
}
|
||
if (fileDrop.uploading) {
|
||
layer.confirm('是否取消上传当前列表的文件，若取消上传，已上传的文件，需用户手动删除，是否取消上传？', {
|
||
title: '取消上传文件',
|
||
icon: 0,
|
||
btn: ['取消上传', '继续上传']
|
||
}, function (indexs) {
|
||
layer.close(index);
|
||
layer.close(indexs);
|
||
file_init()
|
||
}, function () {
|
||
fileDrop.uploadSuspend = true //开启暂停标识，用于继续上传功能
|
||
open_upload_window()
|
||
});
|
||
//return false;
|
||
} else {
|
||
layer.close(index);
|
||
file_init()
|
||
}
|
||
},
|
||
});
|
||
}
|
||
|
||
function start_upload(file_index, status, msg) {
|
||
file_index = file_index == null ? 0 : file_index
|
||
if (status) { //这个参数只在上传回调中传递，用于更新文件上传结果，如果这个参数存在，表示file_index已经走完上传流程，故file_index需自增1，代表开始下一个文件的上传
|
||
// if(msg){
|
||
// upload_view(file_index,msg)
|
||
// }else{
|
||
// upload_view(file_index,status)
|
||
// }
|
||
fileDrop.filesList[file_index].upload = status //更新文件列表中的状态
|
||
upload_view(file_index, msg == undefined ? status : msg)
|
||
file_index++
|
||
}
|
||
let reader = new FileReader(); //这个可以选择函数外声明，可避免重复创建
|
||
if (reader == undefined) {
|
||
file_init()
|
||
layer.msg("您的浏览器暂不支持在线上传文件！")
|
||
return false
|
||
}
|
||
reader.onload = function () {
|
||
let fileData = _arrayBufferToBase64(this.result);
|
||
fileDrop.filesList[file_index].upload = 1 //修改状态为上传中
|
||
upload_view(file_index, 1) //修改视图内容
|
||
sendFile(fileDrop.filesList[file_index], fileData, file_index, start_upload)
|
||
//console.log(fileData);
|
||
}
|
||
if (file_index < fileDrop.filesList.length) { //采用回调方式上传，进度更可控
|
||
if (fileDrop.filesList[file_index].upload < 2) { //可继续上传未上传的文件
|
||
let f_id = "#file_" + file_index + " td";
|
||
$(f_id)[2].innerHTML = "<font color='#808080'>解析中</font>";
|
||
reader.readAsArrayBuffer(fileDrop.filesList[file_index].file)
|
||
}
|
||
} else {
|
||
layer.msg("上传完成")
|
||
$('.layui-layer-btn0').text('上传完成');
|
||
$('.layui-layer-btn1').text('关闭窗口');
|
||
fileDrop.done = true
|
||
}
|
||
// for (let i = 0; i < fileDrop.filesList.length; i++) {
|
||
// reader.readAsArrayBuffer(fileDrop.filesList[i].file);
|
||
// }
|
||
}
|
||
|
||
function upload_view(file_index, status) {
|
||
let f_id = "#file_" + file_index + " td";
|
||
$(f_id)[2].innerHTML = getstatu(status);
|
||
}
|
||
|
||
function _arrayBufferToBase64(buffer) {
|
||
let binary = '';
|
||
let bytes = new Uint8Array(buffer);
|
||
let len = bytes.byteLength;
|
||
for (var i = 0; i < len; i++) {
|
||
binary += String.fromCharCode(bytes[i]);
|
||
}
|
||
return window.btoa(binary);
|
||
}
|
||
|
||
function create_row(index, file) {
|
||
//console.log(file)
|
||
return "<tr id='file_" + index + "'><td title='" + file.local + "' style=\"white-space:nowrap;overflow:hidden;text-overflow: ellipsis;\">" + file.local + "</td> <td>" + file.size + "</td> <td>" + getstatu(file.upload) + "</td></tr>"
|
||
}
|
||
|
||
function getstatu(statu) {
|
||
//上传状态,未上传：0、上传中：1，已上传：2，上传失败：-1
|
||
if (statu == -1) {
|
||
return "<font color='red'>上传失败</font>"
|
||
} else {
|
||
if (statu == 0) {
|
||
return "<font color='black'>未上传</font>"
|
||
} else if (statu == 1) {
|
||
return "<font color='#808080'>上传中</font>"
|
||
} else if (statu == 2) {
|
||
return "<font color='green'>已上传</font>"
|
||
} else {
|
||
return "<font color='red'>" + statu + "</font>"
|
||
}
|
||
}
|
||
}
|
||
|
||
function to_size(a) {
|
||
var d = [" B", " KB", " MB", " GB", " TB", " PB"];
|
||
var e = 1024;
|
||
for (var b = 0; b < d.length; b += 1) {
|
||
if (a < e) {
|
||
var num = (b === 0 ? a : a.toFixed(2)) + d[b];
|
||
return (!isNaN((b === 0 ? a : a.toFixed(2))) && typeof num != 'undefined') ? num : '0B';
|
||
}
|
||
a /= e
|
||
}
|
||
} |