HTML5 consente il caricamento a trascinamento di cartelle o un albero di cartelle?

Non ho visto nessun esempio che faccia questo. Questo non è consentito nelle specifiche API?

Sto cercando una soluzione drag-drop facile per caricare un intero albero di cartelle di foto.

Ora è ansible grazie a Chrome> = 21.

 function traverseFileTree(item, path) { path = path || ""; if (item.isFile) { // Get file item.file(function(file) { console.log("File:", path + file.name); }); } else if (item.isDirectory) { // Get folder contents var dirReader = item.createReader(); dirReader.readEntries(function(entries) { for (var i=0; i 

Maggiori informazioni: https://protonet.info/blog/html5-experiment-drag-drop-of-folders/

In questo messaggio alla mailing list HTML 5 Ian Hickson dice:

HTML5 ora deve caricare molti file contemporaneamente. I browser possono consentire agli utenti di selezionare più file contemporaneamente, anche su più directory; questo è un po ‘fuori dalla portata delle specifiche.

(Vedere anche la proposta di funzionalità originale.) Quindi è sicuro presupporre che considera il caricamento di cartelle utilizzando il trascinamento della selezione anche al di fuori dell’ambito. Apparentemente è compito del browser servire i singoli file.

Il caricamento delle cartelle avrebbe anche qualche altra difficoltà, come descritto da Lars Gunther :

Questa proposta […] deve avere due assegni (se è fattibile a tutti):

  1. Dimensione massima, per impedire a qualcuno di caricare una directory completa di diverse centinaia di immagini non compresse non elaborate …

  2. Filtro anche se l’attributo accept è omesso. I metadati del Mac OS e le miniature di Windows, ecc. Dovrebbero essere omessi. Tutti i file e le directory nascosti dovrebbero essere esclusi per impostazione predefinita.

Ora puoi caricare le directory sia con il drag and drop che con l’input.

  

e per il drag and drop (per i browser Webkit).

Gestione delle cartelle di trascinamento e rilascio.

 

risorse:

http://updates.html5rocks.com/2012/07/Drag-and-drop-a-folder-onto-Chrome-now-available

Firefox ora supporta il caricamento delle cartelle, a partire dal 15 novembre 2016, nella v50.0: https://developer.mozilla.org/en-US/Firefox/Releases/50#Files_and_directories

Puoi trascinare e rilasciare cartelle in Firefox oppure puoi navigare e selezionare una cartella locale da caricare. Supporta anche le cartelle nidificate nelle sottocartelle.

Ciò significa che ora puoi utilizzare Chrome, Firefox, Edge o Opera per caricare le cartelle. Al momento non è ansible utilizzare Safari o Internet Explorer.

Questa funzione ti darà una promise per la matrice di tutti i file rilasciati, come i file .files

 function getFilesWebkitDataTransferItems(dataTransferItems) { function traverseFileTreePromise(item, path='') { return new Promise( resolve => { if (item.isFile) { item.file(file => { file.filepath = path + file.name //save full path files.push(file) resolve(file) }) } else if (item.isDirectory) { let dirReader = item.createReader() dirReader.readEntries(entries => { let entriesPromises = [] for (let entr of entries) entriesPromises.push(traverseFileTreePromise(entr, path + item.name + "/")) resolve(Promise.all(entriesPromises)) }) } }) } let files = [] return new Promise((resolve, reject) => { let entriesPromises = [] for (let it of dataTransferItems) entriesPromises.push(traverseFileTreePromise(it.webkitGetAsEntry())) Promise.all(entriesPromises) .then(entries => { //console.log(entries) resolve(files) }) }) } 

Uso:

 dropArea.addEventListener("drop", function(event) { event.preventDefault(); var items = event.dataTransfer.items; getFilesFromWebkitDataTransferItems(items) .then(files => { ... }) }, false); 

Le specifiche HTML5 NON dicono che quando si seleziona una cartella per il caricamento, il browser deve caricare tutti i file contenuti in modo ricorsivo.

In realtà, in Chrome / Chromium, puoi caricare una cartella, ma quando lo fai, carica semplicemente un file 4KB senza significato, che rappresenta la directory. Alcune applicazioni lato server come Alfresco possono rilevarlo e avvisare l’utente che non è ansible caricare le cartelle:

Non è possibile caricare quanto segue perché sono o cartelle o hanno dimensioni zero byte: non definito

HTML5 consente il caricamento a trascinamento di cartelle o un albero di cartelle?

Solo Chrome supporta questa funzione. Non è riuscito ad avere alcuna trazione ed è probabile che venga rimosso.

Rif: https://developer.mozilla.org/en/docs/Web/API/DirectoryReader#readEntries