如何识别javascript中的文件和文件夹的区别？

Question

我有一个允许删除文件和文件夹的容器。我想识别丢弃项目类型（文件或文件夹）以及确切的文件夹或丢弃项目的文件路径。

注意：如果我使用webkitGetAsEntry（），但我不想使用它，我可以获取项目详细信息。

有人建议我使用文件[0] .size == 4096（用于识别文件夹），而不是正好给出4096.它的变化。

在此先感谢。

Answer 1

这可能有所帮助。它可以改善，但做的工作：

function drop_type(string) 
{ 
    return /(\.[a-z0-9]{2,5})$/i.test(string) ? 'file' : 'directory'; 
} 

这里是JSFIDDLE。

这是肮脏的解决方案，但工程。在正则表达式中，您可以添加扩展并匹配它。

Answer 2

您可以使用if (!f.type && f.size % 4096 == 0)检查文件夹进行文件夹检测。请参阅下面的代码片段。

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);

#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; 
 
} 
 
#info { 
 
    font-family: monospace; 
 
    font-size: 18px; 
 
}

<div id="drop_zone">Drop files here</div> 
 
<div id="info"></div>