Comment lire un répertoire dans html5 à partir d'une entrée de sélecteur de dossiers?

Question

Je veux avoir un champ de saisie qui vous permet de sélectionner un dossier. Ensuite, utilisez l'API du lecteur de répertoire html5 pour lire récursivement tous les fichiers et dossiers qui s'y trouvent.

Est-ce que quelqu'un connaît des didacticiels qui le font spécifiquement? J'ai du code ici, mais ça ne marche pas, ça liste toujours un tableau vide en lisant.

<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

Vous pourriez avoir une fonction attachée à l'événement onchange de l'entrée de fichier. Lorsque cette fonction est appelée, vous pouvez accéder à la liste des fichiers en accédant à event.target.files. Ensuite, lorsque l'utilisateur appuie sur le bouton Lire, vous pouvez traiter les fichiers.

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

Ce guide pourrait être utile: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory