¿Cómo leer un archivo de texto local en el navegador?

8 minutos de lectura

avatar de usuario
dany

Estoy tratando de implementar un lector de archivos de texto simple mediante la creación de una función que toma la ruta del archivo y convierte cada línea de texto en una matriz de caracteres, pero no funciona.

function readTextFile() {
  var rawFile = new XMLHttpRequest();
  rawFile.open("GET", "testing.txt", true);
  rawFile.onreadystatechange = function() {
    if (rawFile.readyState === 4) {
      var allText = rawFile.responseText;
      document.getElementById("textSection").innerHTML = allText;
    }
  }
  rawFile.send();
}

¿Qué está fallando aquí?

Esto todavía no parece funcionar después de cambiar un poco el código de una revisión anterior y ahora me está dando una XMLHttpRequest excepción 101.

Probé esto en Firefox y funciona, pero en Google Chrome simplemente no funciona y me sigue dando una Excepción 101. ¿Cómo puedo hacer que esto funcione no solo en Firefox, sino también en otros navegadores (especialmente Chrome )?

  • Lo que está sucediendo específicamente. ¿No hay nada en la matriz? ¿O simplemente las cosas “incorrectas” …?

    – PinkElephantsOnParade

    21 de enero de 2013 a las 20:15

  • ¿Estás probando en una máquina local? Asegúrese de probar una status de 0 tanto como 200.

    –Jeffrey Sweeney

    21 de enero de 2013 a las 20:16

  • @JeffreySweeney sí, estoy probando esto en una máquina local. He almacenado el archivo de texto en el mismo lugar que los javascripts y html

    – danny

    21 de enero de 2013 a las 20:18

avatar de usuario
majid laissi

Debe verificar el estado 0 (como cuando carga archivos localmente con XMLHttpRequestno obtiene un estado devuelto porque no es de un Webserver)

function readTextFile(file)
{
    var rawFile = new XMLHttpRequest();
    rawFile.open("GET", file, false);
    rawFile.onreadystatechange = function ()
    {
        if(rawFile.readyState === 4)
        {
            if(rawFile.status === 200 || rawFile.status == 0)
            {
                var allText = rawFile.responseText;
                alert(allText);
            }
        }
    }
    rawFile.send(null);
}

y especificar file:// en su nombre de archivo:

readTextFile("file:///C:/your/path/to/file.txt");

  • De hecho, estoy trabajando en esto en una Mac, entonces, ¿seguiría especificando el archivo: //?

    – danny

    21 de enero de 2013 a las 21:01

  • tratar de poner file:///User/Danny/Desktop/javascriptWork/testing.txt en la barra de URL de su navegador y vea si puede ver el archivo.

    – Majid Laissi

    21 de enero de 2013 a las 21:52

  • no necesita ser una ruta absoluta… esto me funcionó bien: readTextFile(‘Properties/version.txt’); ¡Gracias!

    – Alma sónica

    17 de abril de 2014 a las 0:08

  • Dado que estamos leyendo desde un servidor web, deberíamos tener async configurado en true. Si esto fuera un simple local buscar y luego configurar asíncrono para false está bien, pero onreadystatechange no es necesario mientras se establece en falso. Aquí está la documentación: w3schools.com/ajax/ajax_xmlhttprequest_send.asp

    – Miguel Ramos

    16/08/2015 a las 20:25

  • Esto no funcionará en Chrome (posiblemente en otros navegadores), obtendrá “Las solicitudes de origen cruzado solo se admiten para esquemas de protocolo: http, datos, Chrome, Chrome-extension, https, Chrome-extension-resource”.

    – Rick Burgess

    26/10/2015 a las 11:31


avatar de usuario
Abdelaziz Mokhnache

Después de la introducción de buscar API en javascript, leer el contenido del archivo no podría ser más simple.

leyendo un archivo de texto

fetch('file.txt')
  .then(response => response.text())
  .then(text => console.log(text))
  // outputs the content of the text file

leyendo un archivo json

fetch('file.json')
  .then(response => response.json())
  .then(jsonResponse => console.log(jsonResponse))     
   // outputs a javascript object from the parsed json

Actualización 30/07/2018 (descargo de responsabilidad):

Esta técnica funciona bien en Firefoxpero parece que Cromo‘s fetch la implementación no es compatible file:/// Esquema de URL a la fecha de redacción de esta actualización (probado en Chrome 68).

Actualización-2 (descargo de responsabilidad):

Esta técnica no funciona con Firefox anterior a la versión 68 (9 de julio de 2019) por el mismo motivo (de seguridad) que Chrome: CORS request not HTTP. Ver https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSRequestNotHttp.

  • ¡Brillante! Citando el estándar Fetch: “proporciona un manejo consistente de: esquemas de URL, redireccionamientos, semántica de origen cruzado, CSP, trabajadores de servicios, contenido mixto, Referer“. Supongo que esto significa el adiós a los buenos ol’FileReaders y HttpRequests (y no los extrañaré ni un poco;)

    – Brazo

    25 de octubre de 2017 a las 17:17

  • Pero, ¿cómo puedes usar el texto y ponerlo en una variable de cadena para usar en otro lugar? (Sigo obteniendo ‘indefinido’ sin importar lo que le haga).

    – no2qubit

    8 de febrero de 2018 a las 8:03

  • @ not2qubit obtener un archivo de texto es una operación asíncrona. No está definido porque está utilizando la variable antes de que el archivo se lea por completo. Debe usarlo dentro de la devolución de llamada de la promesa o usar algo como los operadores javascript “async await”.

    – Abdelaziz Mokhnache

    8 de febrero de 2018 a las 12:45

  • Fetch API cannot load file:///C:/Users/path/to/file/file.txt. URL scheme must be "http" or "https" for CORS request.

    – J-Pastel

    7 de junio de 2018 a las 2:21

  • Lo mismo aquí estúpido Chrome 68. No puedo creer que este sea un tema candente, gracias @AbdelazizMokhnache, manténganos informados. JAK. Acabo de probar File-Save.js, funciona y quiero algo simple para volver a leer el archivo (básicamente guardar/restaurar mi configuración en un archivo de mi elección)

    – Meryan

    31 de julio de 2018 a las 6:44

avatar de usuario
Amit Chaurasia

Visitar Javascript ! Y ve a la sección leer como texto y prueba el ejemplo. Podrás saber cómo funciona el leer como texto funcion de Lector de archivos obras.

    <html>
    <head>
    <script>
      var openFile = function(event) {
        var input = event.target;

        var reader = new FileReader();
        reader.onload = function(){
          var text = reader.result;
          var node = document.getElementById('output');
          node.innerText = text;
          console.log(reader.result.substring(0, 200));
        };
        reader.readAsText(input.files[0]);
      };
    </script>
    </head>
    <body>
    <input type="file" accept="text/plain" onchange="openFile(event)"><br>
    <div id='output'>
    ...
    </div>
    </body>
    </html>

  • Los enlaces son agradables, pero “siempre debe citar la parte más relevante de un enlace importante, en caso de que no se pueda acceder al sitio de destino o se desconecte permanentemente”. Consulte ¿Cómo escribo una buena respuesta?

    – 4ae1e1

    20 de marzo de 2015 a las 22:04

  • Este ejemplo trata sobre un archivo de texto ingresado por el usuario, pero creo que la pregunta era sobre un archivo que es local para el servidor.

    – S. Kirby

    5 sep 2015 a las 17:42

  • @S.Kirby Como dijo el OP en respuesta a una pregunta sobre si se ejecuta localmente o en un servidor remoto: todo es local. todo en una carpeta, nada más. Además, otras personas (como yo) pueden tener dudas sobre cómo hacerlo localmente.

    – Simón Forsberg

    26 de noviembre de 2019 a las 13:10

var input = document.getElementById("myFile");
var output = document.getElementById("output");


input.addEventListener("change", function () {
  if (this.files && this.files[0]) {
    var myFile = this.files[0];
    var reader = new FileReader();
    
    reader.addEventListener('load', function (e) {
      output.textContent = e.target.result;
    });
    
    reader.readAsBinaryString(myFile);
  }   
});
<input type="file" id="myFile">
<hr>
<textarea style="width:500px;height: 400px" id="output"></textarea>

avatar de usuario
Gorrión

Sí, JS puede leer archivos locales (ver FileReader()) pero no automáticamente: el usuario tiene que pasar el archivo o una lista de archivos al script con un html <input type="file">.

Luego con JS es posible procesar (vista de ejemplo) el archivo o la lista de archivos, algunas de sus propiedades y el contenido del archivo o archivos.

Lo que JS no puede hacer por razones de seguridad es acceder automáticamente (sin la intervención del usuario) al sistema de archivos de su computadora.

Para permitir que JS acceda al fs local automáticamente, no es necesario crear un archivo html con JS dentro, sino un documento hta.

Un archivo hta puede contener JS o VBS en su interior.

Pero el ejecutable hta solo funcionará en sistemas Windows.

Este es el comportamiento estándar del navegador.

También Google Chrome trabajó en la API fs, más información aquí: http://www.html5rocks.com/en/tutorials/file/filesystem/

Solución moderna:

Usar fileOrBlob.text() como sigue:

<input type="file" onchange="this.files[0].text().then(t => console.log

Cuando el usuario cargue un archivo de texto a través de esa entrada, se registrará en la consola. Aquí hay una demostración de jsbin en funcionamiento.

Aquí hay una versión más detallada:

<input type="file" onchange="loadFile(this.files[0])">
<script>
  async function loadFile(file) {
    let text = await file.text();
    console.log(text);
  }
</script>

Actualmente (enero de 2020) esto solo funciona en Chrome y Firefox, verifique aquí la compatibilidad si está leyendo esto en el futuro: https://developer.mozilla.org/en-US/docs/Web/API/Blob/text

En navegadores más antiguos, esto debería funcionar:

<input type="file" onchange="loadFile(this.files[0])">
<script>
  async function loadFile(file) {
    let text = await (new Response(file)).text();
    console.log(text);
  }
</script>

Relacionado: A partir de septiembre de 2020, el nuevo API del sistema de archivos nativo disponible en Chrome y Edge en caso de que desee acceso de lectura permanente (e incluso acceso de escritura) al archivo seleccionado por el usuario.

Usando Buscar y función asíncrona

const logFileText = async file => {
    const response = await fetch(file)
    const text = await response.text()
    console.log(text)
}

logFileText('file.txt')

  • Obtengo ‘El esquema de URL debe ser “http” o “https” para la solicitud de CORS.’

    – Qwerty

    28 de junio de 2019 a las 11:06

  • Solución perfecta. Era tan simple como “logFileText(‘./test.txt’)”

    – Amit

    26 de enero de 2021 a las 9:47

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad