Come leggere i file locali in JavaScript

JavaScript è un linguaggio di programmazione web di alto livello che offre alle pagine Web la possibilità di pensare e agire. JavaScript offre agli sviluppatori interattività con file presenti sul sistema locale dello sviluppatore. L'interattività con i file può essere di diversi tipi, ad esempio, caricare un file su un server o caricarlo con restrizioni.

Esistono diversi modi per aprire e leggere i file locali in JavaScript, il più comune è usare l'API di file file-system/promesse integrato -"FS" API o utilizzando l'attributo file HTML Select del

Tagga, o anche usando un pacchetto esterno e quindi prova il suo metodo.

Quindi, in questo post, ti mostreremo come leggere i file locali in JavaScript usando il API FS e usando

L'attributo file HTML Select.

API HTML5 FILEREADER

HTML5 ha introdotto un meccanismo coerente per gestire i file locali introducendo il API del lettore file Specifiche. IL API del lettore file può essere utilizzato per fornire un'anteprima delle foto della miniatura quando vengono trasmesse a un server e consentire a un'applicazione Web di archiviare un riferimento di file anche se l'utente non è connesso a Internet. Usando i gestori di eventi di JavaScript e dell'API del lettore file possiamo leggere asincrono un file.

Il lettore di file API ci offre quattro metodi integrati che possiamo utilizzare per leggere i file in modo asincrono. Il primo metodo integrato è il Filereader.readAsArrayBuffer () che legge un contenuto di file locale ma restituisce un ArrayBuffer che ha il contenuto del file. Poi arriva il Filereader.readasdataurl () che restituisce un URL dei dati da un file locale.

IL Filereader.readasbinarystring () Restituisce il contenuto del file locale in un formato stringa e il metodo incorporato più utilizzato di FileReader è il Filereader.readastext () Ciò restituisce il contenuto del file locale in un formato stringa di testo o possiamo dire in una forma leggibile dall'uomo.

Ora che sappiamo cos'è l'API FileReader, impostiamo l'ambiente HTML affinché un utente seleziona un file che vuole che il browser legga.

HTML Select File

HTML è un linguaggio di markup ipertestuale che viene utilizzato per dare struttura alle nostre pagine Web. Useremo HTML per rendere l'utente selezionare un file e quindi useremo JavaScript per leggere il contenuto del file. Il codice HTML è riportato di seguito:

Nel codice sopra, abbiamo inizializzato un ingresso tagga con il tipo di file e dato l'attributo id che verrà utilizzato per fare riferimento a questo elemento nel nostro file JavaScript. Successivamente, abbiamo inizializzato a P tag in cui verrà pubblicato il nostro contenuto del file una volta che l'utente seleziona un file. Alla fine, usiamo il sceneggiatura con l'attributo SRC in cui abbiamo fatto riferimento a un file codice.js che conterrà il nostro codice JavaScript.

JavaScript Leggi la funzionalità dei file

Abbiamo finito con HTML, quindi ora passiamo a JavaScript per raggiungere il nostro scopo di leggere un file in JavaScript. A tale scopo, useremo il metodo integrato API del lettore file readastext (). Il codice JavaScript è riportato di seguito:

var myfile = document.getElementById ("MyFile");
var fileoutput = documento.getElementById ("FileOutput");
il mio file.addEventListener ('Change', function ()
var fileReader = new FileReader ();
filereader.onload = function ()
file output.TextContent = FileReader.risultato;

filereader.ReadaStext (questo.files [0]);
)

Nel codice sopra, in primo luogo, otteniamo il riferimento del file di input e del P tag che impostiamo in HTML usando il loro attributo ID. Successivamente, abbiamo aggiunto un ascoltatore di eventi di modifica in modo che ogni volta che un utente seleziona un file o sceglie un file, la funzione presente in questo gestore di eventi inizierà a eseguire.

All'interno della funzione di gestore eventi prima, abbiamo inizializzato il FileReader () oggetto con la nuova parola chiave. Poi al completamento del filereader funzione stiamo solo pubblicando il risultato del file lettura nella variabile FileOutput che è effettivamente il P etichetta.

Alla fine, stiamo leggendo il file con l'aiuto del metodo integrato di filereader che è readastext () e passare un argomento per menzionare la lettura del file che si trova sul primo indice. Lo stiamo facendo in modo che l'utente non selezioni più file e anche se ha selezionato più file, il fileReader leggerà semplicemente il primo file tra loro.

Selezioniamo ora un file. A tale scopo, ho creato un testo documenta e ha scritto due righe in quel file. L'output del contenuto del file è riportato di seguito:

Selezioniamo ora questo file da HTML e vediamo se possiamo vedere il contenuto del file o no:

Abbiamo scelto con successo un file e letto il suo contenuto e quindi stampato quel contenuto.

Conclusione

HTML5 fornisce un'API FileReader attraverso la quale possiamo leggere il contenuto dei file. L'API FileReader ci fornisce quattro metodi costruiti che possiamo usare per leggere un file nel modo in cui vogliamo. Il readaRarrayBuffer () legge un file e restituisce un arrayBuffer del contenuto del file, readaSDataurl () legge il file e restituisce un URL che ha contenuto del file di lettura, readasbinarystring () Leggi un file e restituisce i dati binari non elaborati del file di lettura e L'ultimo è il readastext () che legge un file e restituisce il contenuto del file di lettura come una stringa di testo che si trova in forma leggibile dall'uomo.

In questo post, abbiamo discusso di come leggere un file locale in JavaScript implementando prima come selezionare un file locale utilizzando HTML, quindi quando selezioniamo quel file leggiamo il contenuto del file usando JavaScript.