Come lavorare con i file in JavaScript usando API FileReader | Spiegato con esempi
Leggere un file e leggere i suoi dati può essere eseguito in più modi, ma a volte è meglio utilizzare l'oggetto \ API supportato da quasi tutti i browser Web. Ecco perché l'API FileReader è uno degli oggetti più usati di Vanilla JavaScript per leggere il contenuto di un file.
Oggetto del lettore file
Per creare un nuovo oggetto Reader file è necessario chiamare prima il FileReader () costruttore usando il "nuovo" parola chiave. Successivamente, puoi iniziare a utilizzare le varie funzioni di questo oggetto. Per saperne di più su questo costruttore puoi visitare i documenti ufficiali da parte del MDN facendo clic qui.
Metodi del lettore file
L'oggetto del lettore file viene fornito con molti metodi diversi che ci aiutano a analizzare i dati del file che stiamo leggendo. Alcuni dei metodi sono eseguiti automaticamente dai browser e sono chiamati metodi di gestore di eventi, ad esempio il "Onload ()" il metodo viene automaticamente invocato una volta terminato il lettore di file leggendo il contenuto del file.
Per accedere ai metodi dell'oggetto del lettore file usi a Operatore dot " .". Alcuni dei metodi e delle variabili a cui è possibile accedere utilizzando l'oggetto del lettore file sono ::
- oggetto. Risultato: usato per ottenere il contenuto del file che è stato letto
- oggetto.ReadaStext: legge il contenuto del file e li analizza come un testo
- oggetto.abort: interrompe l'attuale operazione di lettura
E molto altro che può essere letto sulla pagina web della loro documentazione ufficiale.
Esempio di lettore file
Per dimostrare l'uso dell'API del lettore file avremo bisogno di una pagina Web HTML con un campo di input del type = "file", Possiamo crearlo utilizzando la seguente riga nel file HTML:
Questo ci darà la seguente pagina web:
Nota: Non abbiamo usato alcun attributo ID o classe nel campo di input poiché ci riferiremo al nostro campo di input utilizzando il selettore di query.
Per il codice JavaScript, la prima cosa che faremo è selezionare il campo di input usando il selettore delle query:
const input = document.QuerySelector ('input [type = "file"]');Successivamente, aggiungeremo un ascoltatore di eventi di "modifica" sulla nostra variabile ingresso, che chiamerà una funzione per caricare il contenuto del file utilizzando la riga seguente:
ingresso.addEventListener ("cambiamento", funzione (e), false);
Questo ascoltatore di eventi della funzione eseguirà ogni volta che Tag di input carica un file, possiamo accedere al file utilizzando il "ingresso.file" vettore. Per visualizzare i dettagli del file caricato possiamo utilizzare la riga seguente:
console.registro (input.File [0])Ottiamo il seguente output sulla nostra console:
All'interno della funzione, creeremo il nostro oggetto Reader di file usando la riga:
const reader = new FileReader ();Il file che voglio leggere è un file di testo, quindi qui userò il metodo readaasxt dell'oggetto del lettore file per analizzare il contenuto dei file come dati testuali utilizzando le seguenti righe:
lettore.ReadaStext (input.files [0]);Ora possiamo accedere al contenuto del file che leggiamo e analizzati usando il lettore.risultato. IL onload () Il metodo viene automaticamente chiamato quando viene eseguito l'oggetto del lettore file leggendo il file, quindi possiamo visualizzare il contenuto del file una volta terminato la lettura utilizzando i seguenti comandi:
lettore.onload = function ()console.registro (lettore.risultato);
;
Il frammento completo del codice è:
const input = document.QuerySelector ('input [type = "file"]');ingresso.addEventListener (
"modifica",
function (e)
console.registro (input.files [0]);
const reader = new FileReader ();
lettore.ReadaStext (input.files [0]);
lettore.onload = function ()
console.registro (lettore.risultato);
;
,
falso
);
Esegui il file e seleziona un file di testo sul tuo computer locale come questo:
Osserverai il seguente risultato sulla tua console:
E eccoti, hai letto il contenuto del file e li hai stampati sulla console.
Lavorare con un'immagine
Per leggere un'immagine e per visualizzarla sulla console è necessario prima leggere il file con il readasdataurl Utilizzando la riga seguente:
lettore.readasdataurl (input.files [0]);E per visualizzare l'immagine sulla pagina Web è necessario creare una nuova variabile di immagine all'interno del onload () funzione usando le seguenti righe:
lettore.onload = function ()const img = new Image ();
;
,
E poi dentro questo Onload funzione, si imposterà la fonte della variabile immagine che abbiamo creato uguale al risultato dell'oggetto del lettore file:
img.src = lettore.risultato;E infine, aggiungeremo questa variabile di immagine al documento usando la riga seguente:
documento.corpo.AppendChild (IMG);Il frammento completo del codice è:
const input = document.QuerySelector ('input [type = "file"]');ingresso.addEventListener (
"modifica",
function (e)
console.registro (input.files [0]);
const reader = newFileReader ();
lettore.readasdataurl (input.files [0]);
lettore.onload = function ()
costimg = new Image ();
img.src = lettore.risultato;
documento.corpo.AppendChild (IMG);
;
,
falso
);
All'esecuzione del file, avrai il seguente output:
E eccoti, ora sai come lavorare con l'API del lettore file per leggere i file sul tuo computer locale
Conclusione
L'API del lettore di file è disponibile come API integrata con Vanilla JavaScript ed è supportata da quasi tutti i browser Web. Questa API del lettore di file ci restituisce un oggetto Reader File che possiamo utilizzare per leggere il contenuto del file selezionando il metodo di analisi. In questo post, abbiamo appreso l'API del lettore file, l'oggetto del lettore file e come utilizzare l'oggetto del lettore file per leggere i file di testo e i file di immagine. Abbiamo anche visualizzato l'immagine sul browser Web aggiungendola nel documento.