[TOC] ## 示例 ## 先在body 下插入html html ``` //css .drop{ background-color:rgba(255, 255, 255, 0.6); border: 6px dashed #cecece ; box-sizing: border-box; width: 100%; height: 100vh; position: absolute; left: 0; top: 0; z-index: 9999999; display: flex; justify-content: center; align-items: center; } .drop p{ font-size: 30px; color: #a7a7a7; } // html <div id="drop" class="drop "> <p>上傳文件到當前目錄下</p> </div> ``` jquery ``` function ini_drop() { // 防抖 var dropindex=0; // 作用為drop 拖拽時方式頻繁觸發 dropenter 與 dragover $("body").on({ 'dragenter': function(event) { event.preventDefault(); dropindex++ $("#drop").removeClass("hide"); }, 'dragover': function(event) { event.preventDefault(); }, 'dragleave': function(event) { event.preventDefault(); dropindex-- if (dropindex===0){ $("#drop").addClass("hide"); } }, 'drop': function(event) { $("#drop").addClass("hide"); //清除瀏覽器默認的功能 event.preventDefault(); //獲取文件的信息，可自行輸出查看 let file = event.originalEvent.dataTransfer.files; let items =event.originalEvent.dataTransfer.items; if (items.length > 1) { this.loading = false; showTipError("一次只允許上傳一個文件夾") } var item = items[0].webkitGetAsEntry(); if (item) { if (item.isDirectory) { traverseFileTree(item) } else { huploadify.onSelect(file); } } }, }) function traverseFileTree(item) { var internalProces = (item, path) => { if (item.isFile) { item.file(file => { var newFile = new File([file], file.name, { type: file.type }); newFile.drop_path=path + file.name // webkitRelativePath 是只讀屬性,無法復制, // 當前文件 huploadify.onSelect([newFile]); }); } else if (item.isDirectory) { var dirReader = item.createReader(); dirReader.readEntries( function(entries) { //success for (let i = 0; i < entries.length; i++) { internalProces(entries[i], path + item.name + "/"); } }, function(e) { //error console.log(e); } ); } }; internalProces(item, ""); } } ```