loaderutils.js
var LoaderUtils = {
createFilesMap: function(files) {
var map = {};
for (var i = 0; i < files.length; i++) {
var file = files[i];
map[file.name] = file;
}
return map;
},
getFilesFromItemList: function(items, onDone) {
// TOFIX: setURLModifier() breaks when the file being loaded is not in root
var itemsCount = 0;
var itemsTotal = 0;
var files = [];
var filesMap = {};
function onEntryHandled() {
itemsCount++;
if (itemsCount === itemsTotal) {
onDone(files, filesMap);
}
}
function handleEntry(entry) {
if (entry.isDirectory) {
console.log(entry + "mulu");
var reader = entry.createReader();
reader.readEntries(function(entries) {
for (var i = 0; i < entries.length; i++) {
handleEntry(entries[i]);
}
onEntryHandled();
});
} else if (entry.isFile) {
entry.file(function(file) {
files.push(file);
console.log(entry.fullPath);
console.log(entry.fullPath.substr(1));
filesMap[entry.fullPath.substr(1)] = file;
onEntryHandled();
});
}
itemsTotal++;
}
for (var i = 0; i < items.length; i++) {
var item = items[i];
if (item.kind === 'file') {
handleEntry(item.webkitGetAsEntry());
}
}
}
};
export { LoaderUtils };
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
//发布的时候,script标签加上type="module" ,这里不加主要是 vscode加上后排版成一行,不方便查看
<script>
import {
LoaderUtils
} from './LoaderUtils.js';
document.addEventListener('dragover', function(event) {
event.preventDefault();
event.dataTransfer.dropEffect = 'copy';
}, false);
document.addEventListener('drop', function(event) {
event.preventDefault();
LoaderUtils.getFilesFromItemList(event.dataTransfer.items, function(files, filesMap) {
console.log(files, filesMap);
});
});
</script>
<body>
吾问无为谓无无无
</body>
</html>
下面准备一个目录
将新建文件夹(8)这个目录拖放到页面上,可以看到打印结果: