폴더 선택기 입력에서 html5의 디렉토리를 읽는 방법?

Question

폴더를 선택할 수있는 입력 필드가 필요합니다. 그리고 html5 디렉토리 리더 API를 사용하여 재귀 적으로 모든 파일과 폴더를 읽습니다.

누구나 특별히이 튜토리얼을 알고 있습니까? 여기에 코드가 있지만 작동하지 않습니다. 항상 읽을 때 빈 배열을 나열합니다.

<input type="file" id="filepicker" name="fileList" webkitdirectory directory /> 
<button id="ff">Read</button> 
<ul id="filelist"></ul> 

JS

function toArray(list) { 
    return Array.prototype.slice.call(list || [], 0); 
} 

function listResults(entries) { 
    // Document fragments can improve performance since they're only appended 
    // to the DOM once. Only one browser reflow occurs. 
    var fragment = document.createDocumentFragment(); 

    entries.forEach(function(entry, i) { 
    var img = entry.isDirectory ? '<img src="folder-icon.gif">' : 
            '<img src="file-icon.gif">'; 
    var li = document.createElement('li'); 
    li.innerHTML = [img, '<span>', entry.name, '</span>'].join(''); 
    fragment.appendChild(li); 
    }); 

    document.querySelector('#filelist').appendChild(fragment); 
} 

function onInitFs(fs) { 

    var dirReader = fs.root.createReader(); 
    var entries = []; 

    // Call the reader.readEntries() until no more results are returned. 
    var readEntries = function() { 
    dirReader.readEntries (function(results) { 
     if (!results.length) { 
     listResults(entries.sort()); 
     } else { 
     entries = entries.concat(toArray(results)); 
     readEntries(); 
     } 
    }, errorHandler); 
    }; 

    readEntries(); // Start reading dirs. 

} 

function errorHandler(e) { 
    var msg = ''; 

    switch (e.code) { 
    case DOMError.QUOTA_EXCEEDED_ERR: 
     msg = 'QUOTA_EXCEEDED_ERR'; 
     break; 
    case DOMError.NOT_FOUND_ERR: 
     msg = 'NOT_FOUND_ERR'; 
     break; 
    case DOMError.SECURITY_ERR: 
     msg = 'SECURITY_ERR'; 
     break; 
    case DOMError.INVALID_MODIFICATION_ERR: 
     msg = 'INVALID_MODIFICATION_ERR'; 
     break; 
    case DOMError.INVALID_STATE_ERR: 
     msg = 'INVALID_STATE_ERR'; 
     break; 
    default: 
     msg = 'Unknown Error'; 
     break; 
    }; 

    console.log('Error: ' + msg); 
} 



document.getElementById("ff").addEventListener("click", function() { 
    var selectedFiledf = $("#filepicker").val(); 
    window.webkitRequestFileSystem(selectedFiledf, 1024*1024, onInitFs, errorHandler); 
}); 

Answer 1

당신은 파일 입력의 onchange를 이벤트에 부착 된 기능을 가질 수있다. 이 함수를 호출하면 event.target.files에 액세스하여 파일 목록에 액세스 할 수 있습니다. 그런 다음 사용자가 읽기 단추를 누르면 파일을 처리 할 수 ​​있습니다.

var files; 
document.getElementById("filepicker").addEventListener("change", function(event) { 
    files = event.target.files; 
}, false); 

이 가이드는 유용 할 수 있습니다 : https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory

의