어떻게 자바 스크립트에서 파일과 폴더 ondropping의 차이를 확인하려면?

Question

파일과 폴더를 삭제할 수있는 컨테이너가 있습니다. 드롭 항목 유형 (파일 또는 폴더)과 정확히 폴더 또는 삭제 된 항목 파일 경로을 확인하고 싶습니다.

참고 : webkitGetAsEntry()을 사용하면 항목 세부 정보를 얻을 수 있지만 이것을 사용하고 싶지는 않습니다.

누군가 나를 파일 [0] .size == 4096 (폴더 식별 용)과 정확히 4096을 제공하지 말 것을 제안했습니다.

미리 감사드립니다.

Answer 1

도움이 될 수 있습니다. 개선 할 수는 있지만 일을하십시오 :

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

여기는 JSFIDDLE입니다.

이것은 더러운 해결책이지만 작동합니다. regex에서 확장을 추가하고 그것을 일치시킬 수 있습니다.

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>