在拖放文件夹后,我们可以获取该文件夹的所有文件名吗?如果可以,我们该怎么办?
这是拖放文件夹的代码:
HTML:
<div id="drop_zone">Drop files here</div>
<div id="info"></div>
JS:
function handleDrop(e) {
e.stopPropagation();
e.preventDefault();
var files = e.dataTransfer.files,
folders = 0,
other = 0;
for (var i = 0, f; f = files[i]; i++) { // iterate in the files dropped
if (!f.type && f.size % 4096 == 0) folders++;
else other++;
}
if (folders && !other) {
if (folders > 1) info.innerHTML = 'You dropped ' + folders +' folders!';
else info.innerHTML = 'You dropped 1 folder!';
} else if (!folders && other) {
if (other > 1) info.innerHTML = 'You dropped ' + other +' files!';
else info.innerHTML = 'You dropped 1 file!';
} else {
if (folders > 1) info.innerHTML = 'You dropped ' + folders +' folders ';
else info.innerHTML = 'You dropped 1 folder ';
if (other > 1) info.innerHTML += 'and ' + other +' files!';
else info.innerHTML += 'and 1 file!';
}
}
function handleDragOver(e) {
e.stopPropagation();
e.preventDefault();
e.dataTransfer.dropEffect = 'copy';
}
function handleDragEnter(e) {
e.stopPropagation();
e.preventDefault();
info.innerHTML = '<b>Dragging...</b>';
}
function handleDragLeave(e) {
e.stopPropagation();
e.preventDefault();
info.innerHTML = '';
}
var dropZone = document.getElementById('drop_zone'),
info = document.getElementById('info');
dropZone.addEventListener('dragenter', handleDragEnter, false);
dropZone.addEventListener('dragover', handleDragOver, false);
dropZone.addEventListener('dragleave', handleDragLeave, false);
dropZone.addEventListener('drop', handleDrop, false);
CSS:
#drop_zone {
border: 2px dashed #bbb;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
padding: 25px;
text-align: center;
font-family: sans-serif;
font-size: 1.5em;
color: #bbb;
}
#drop_zone:hover {
background-color: blue;
cursor: pointer;
}
#info {
font-family: monospace;
font-size: 18px;
}
我实际上试图找到方法,但是我只找到这些链接:Get list of filenames in folder with Javascript或How do you get a list of the names of all files present in a directory in Node.js?,问题是它们使用的是文件夹的路径,但是我,我是我尝试在拖放后立即执行操作。