Abrir archivo de texto local usando JavaScript
-
Use JavaScript
FileReader()para abrir un archivo de texto local -
Utilice JavaScript
FileReader()yjQuerypara abrir un archivo de texto local -
Use JavaScript
PromiseyFileReaderpara abrir un archivo de texto local
Nuestro objetivo es guiarlo sobre varias técnicas y métodos que puede usar para abrir un archivo de texto local usando JavaScript. También demuestra el uso de FileReader(), Promise y diferentes funciones y eventos de jQuery para leer un archivo de texto de su sistema.
Use JavaScript FileReader() para abrir un archivo de texto local
Código HTML:
<!DOCTYPE html>
<html>
<head>
<title>Read Text File</title>
</head>
<body>
<input id='selectedfile' type='text' name='selectedfile'>
<input id='inputfile' type='file' name='inputfile' onChange='showSelectedFile()'>
<br><br>
<pre id="output"></pre>
</body>
</html>
Código CSS:
input[type=file]{
width:90px;
color:transparent;
}
Código JavaScript:
function showSelectedFile() {
selectedfile.value = document.getElementById('inputfile').value;
}
document.getElementById('inputfile').addEventListener('change', function() {
var fr = new FileReader();
fr.onload = function() {
document.getElementById('output').textContent = fr.result;
} fr.readAsText(this.files[0]);
})
Producción:
Este código imprime el contenido del archivo seleccionado (archivo de entrada) igual que está escrito en el archivo de entrada.
El método showSelectedFile() muestra la ruta del archivo de entrada. Luego, se selecciona el elemento cuyo valor de id es inputfile.
El detector de eventos escucha la entrada en busca de cambios. Aquí, se cambia cuando se eligen los archivos.
Tan pronto como se cambia, se ejecuta una función anónima que crea un objeto FileReader utilizando el constructor FileReader() y lo nombra fr. Usando fr, podemos acceder a diferentes funciones y atributos de FileReader(). Esta función lee el contenido del texto y lo muestra en el navegador.
El .onload se utiliza para iniciar una función particular. En nuestro caso, esta función selecciona el primer elemento que tiene id como output y establece su propiedad .textContent con el valor de .result.
.textContent lee el contenido del elemento actual (nodo) y sus elementos descendientes. .readAsText() lee el contenido del archivo de entrada dado. Una vez que lee todo el contenido, el atributo resultado tiene este contenido como una cadena.
La FileList es devuelta por la propiedad files del elemento input. En este ejemplo, se supone que this es un elemento input que devuelve el objeto de archivo en el índice cero (this.files[0]).
Utilice JavaScript FileReader() y jQuery para abrir un archivo de texto local
Código HTML:
<!DOCTYPE html>
<html>
<head>
<title>Read Text File</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<input type="file" name="inputfile" id="inputfile">
<br><br>
<pre id="output"></pre>
</body>
</html>
Código JavaScript:
$(document).ready(function() {
$('#inputfile').change(function() {
var file = this.files[0];
var fr = new FileReader();
fr.onload = function(data) {
$('#output').html(data.target.result);
} fr.readAsText(file);
});
});
Producción :
Hey,
Are you learning about how to open a local text file using JavaScript?
Este código de muestra también imprime el contenido del archivo de entrada tal como está escrito en el archivo (archivo de entrada).
El evento ready() se activa cuando el modelo de objeto del documento (DOM) está completamente cargado. Para entender fácilmente, puede decir que hace que un método sea accesible después de cargar el documento.
El evento change() se utiliza para saber si se cambia el valor del elemento. Podemos usar el evento change() solo con los elementos input, textarea y select. Puede desencadenar el evento change() o ejecutar una función en el evento change().
.html() es muy útil si desea devolver o establecer el innerHTML (contenido) de los elementos elegidos.
Ahora, ¿podría pensar en cómo se está cambiando el innerHTML? Se debe a apuntar al atributo resultado de FileReader.
Eche un vistazo a la siguiente captura de pantalla (delineada en color naranja).
Los .onload, .result, .readAsText() ya están explicados en el apartado anterior. Puede ir allí para echar un vistazo o consultar este enlace para leer en detalle.
Puede usar File-System para leer un archivo de texto local (si está codificando en Node Environment).
Use JavaScript Promise y FileReader para abrir un archivo de texto local
Código HTML:
<!DOCTYPE html>
<html>
<head>
<title>Read Text File</title>
</head>
<body>
<input type="file" onchange="readInputFile(this)"/>
<h3>File Content:</h3>
<pre id="output"></pre>
</body>
</html>
Código JavaScript:
function readFile(file) {
return new Promise((resolve, reject) => {
let freader = new FileReader();
freader.onload = x => resolve(freader.result);
freader.readAsText(file);
})
}
async function readInputFile(input) {
output.innerText = await readFile(input.files[0]);
}
Producción :
Hey,
Are you learning about how to open a local text file using JavaScript?
En este código de ejemplo, la función readInputFile() se ejecuta tan pronto como se selecciona el archivo de entrada. Esta función esperará (utilizando el operador esperar) a que se cumpla la Promesa y devolverá el valor esperado (si se resuelve).
Además, el contenido (innerHTML) del elemento con id output será reemplazado por el valor devuelto por Promise. El operador await está acostumbrado a esperar la Promise, es un objeto que representa el paso o falla de una función asíncrona y su respectivo valor. Tiene tres estados llamados resolver, rechazar y pendiente.
