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 = `
| 文件路径(共` + fileDrop.uploadLength + `个文件) |
文件大小(共` + to_size(fileDrop.uploadAllSize) + `) |
文件状态 |
`
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 = "解析中";
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 "| " + file.local + " | " + file.size + " | " + getstatu(file.upload) + " |
"
}
function getstatu(statu) {
//上传状态,未上传:0、上传中:1,已上传:2,上传失败:-1
if (statu == -1) {
return "上传失败"
} else {
if (statu == 0) {
return "未上传"
} else if (statu == 1) {
return "上传中"
} else if (statu == 2) {
return "已上传"
} else {
return "" + statu + ""
}
}
}
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
}
}