Saltar al contenido
Portada » Lectura Fichero Texto JS

Lectura Fichero Texto JS

Lectura de fichero de texto en Javascript. Se imprime por pantalla el resultado el contenido del fichero procesado.

Implementación


<html>
  <head>
    <title>Lectura de fichero de texto mediante Javascript</title>
  </head>
  <body>
    <input type="file" name="inputFile" id="inputFile">

    <br>
    <pre id="output"></pre>
  
    <script type="text/javascript">
      document.getElementById('inputFile').addEventListener('change', function() {
        var fichero = new FileReader();
        fichero.onload = () => {
          document.getElementById('output').textContent = fichero.result;
        }
        fichero.readAsText(this.files[0]);
      });
    </script>
  </body>
</html>

El código está embebido dentro de una página HTML. Todo lo incluido entre las clausulas <script> pertenece al código Javascript que realiza la lectura del fichero. Es importante entender la dependencia en el código con el elemento HTML identificado como “output” ya que será ahí donde se muestre el resultado.

Este ejemplo muestra un caso claro de manipulación del DOM (Document Object Model) para mostrar un texto procesado.


Más recursos de gestión de ficheros

Escribir fichero JS


Recursos básicos JS

PrototypeAñadir propiedades de forma dinámica a un objeto
toLocaleStringHerramienta esencial para el formateo de fechas y números en aplicaciones internacionales
Recursividad y pilaUso de recursividad y funcionamiento de la pila JS
DesestructuraciónMecanismo para desempaquetar arrays y objetos
Manejo de StringsManejo básico de Strings, cadenas de caracteres
OperadoresUso de operadores de comparación y lógicos
PromesasGestión de peticiones asíncronas con promesas
SleepImplementación de la función sleep() en JS
ThisUso de la palabra reservada this en diferentes contextos
MapsTe enseñamos cuando usar Map y cuando Object con ejemplos
Switchery JSLibrería para modificar el estilo de los checkbox
Mejores libros Javascript EspañolEncuentra los mejores libros para aprender JS y convertirte en el desarrollador más demandado.
Exception JSManejo de excepciones en Javascript, control de errores y flujo de programa.
Obfuscator JavascriptProtege tu código Javascript Ofuscándolo
Javascript desde ceroAprende los conceptos básicos de Javascript, ponte en marcha.
LodashLodash hace que la manipulación de datos en JavaScript sea más fácil y menos propensa a errores
Formatdate JSFormateo y trabajo con fechas en javascript de forma sencilla.
DayjsBiblioteca para la gestión de fechas
padStartManeja cadenas de texto con la función padStart()