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 } }