FileAPI è una delle tante API presenti nelle specifiche di HTML5. Come il nome suggerisce, consente di manipolare file locali all'interno della pagina HTML. Risulta molto comoda perché consente di visualizzare, ad esempio, l'anteprima di una serie di immagini di cui si intende fare l'upload, ancora prima di caricarle, piuttosto che manipolare file localmente o scenari analoghi.
Una delle possibilità, per retro compatibilità, è quella di applicare queste funzionalità al classico tag input, benché sia anche possibile creare upload con form dotate di drag&drop, come vedremo in uno dei prossimi script.
Per iniziare disegniamo l'HTML della pagina:
<!DOCTYPE html> <html><body> <p id="status">File API non supportate dal tuo browser</p> <input type="file" id="files" multiple accept="image/*" /> <ul id="fileList"></ul> </body> </html>
Possiamo notare il tag input, accompagnato dal nuovo attributo multiple (che consente upload multipli) e da quello accept, che filtra a monte la tipologia di contenuti accettati. Completa il quadro un tag ul, dentro il quale andremo a caricare la lista delle immagini.
Ecco il codice JavaScript necessario, completo di commenti:
var files, img, li; var container = document.getElementById('fileList'); // verifichiamo che il supporto per FileAPI sia presente if (document.getElementById('files').files) { document.getElementById('status').innerText = 'FileAPI supportate!'; document.getElementById('files').addEventListener('change', function(e){ var files = e.target.files; // verifichiamo che i file siano arrivati correttamente if (!files) { status.innerHTML = 'I file inviati non sono corretti'; return; } // elenchiamo e mostriamo le info sui file for (var i = 0, file; file = files<i>; i++) { img = document.createElement('img'); img.width = 200; img.src = window.URL.createObjectURL(file); img.alt = file.name; // revochiamo l'accesso alla risorsa una volta letta img.onload = function() { window.URL.revokeObjectURL(this.src); } // aggiungiamo l'immagine alla lista li = document.createElement('li'); li.appendChild(img); container.appendChild(li); } }, false); }
Al caricamento, andiamo a registrarci per l'evento change del tag input, all'interno del quale andremo a caricare la lista dei file. Per gestire la compatibilità con i browser che non supportano FileAPI, mostreremo un messaggio per gestire questa eventualità.
Per il resto, lato server continuerà ad essere un normalissimo upload di file, dato che non abbiamo cambiato il modo in cui il browser invia i dati al nostro server.
Ecco il risultato:

FileAPi è supportata da IE 10+, WebKit e FireFox.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Utilizzare l'espressione if inline in una pipeline di Azure DevOps
Effettuare il binding di date in Blazor
Utilizzare la funzione EF.Parameter per forzare la parametrizzazione di una costante con Entity Framework
Utilizzare QuickGrid di Blazor con Entity Framework
Configurare lo startup di applicazioni server e client con .NET Aspire
Come EF 8 ha ottimizzato le query che usano il metodo Contains
Creare una libreria CSS universale: Clip-path
Ordinare randomicamente una lista in C#
Configurare il nome della run di un workflow di GitHub in base al contesto di esecuzione
Supporto ai tipi DateOnly e TimeOnly in Entity Framework Core
Path addizionali per gli asset in ASP.NET Core MVC
Effettuare il refresh dei dati di una QuickGrid di Blazor