¿Cómo leer un archivo de texto local?

371

Estoy tratando de escribir un lector de archivos de texto simple creando una función que tome la ruta del archivo y convierta 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á mal aquí?

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

He probado 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 )?

javascript file-io xmlhttprequest Danny
fuente
Lo que específicamente está sucediendo. ¿No hay nada en la matriz? ¿O simplemente las cosas "incorrectas"?
PinkElephantsOnParade
¿Estás probando en una máquina local? Asegúrese de prueba para una statusde las 0, así como 200.
Jeffrey Sweeney
1
@ 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

Respuestas:

311

Debe verificar el estado 0 (ya que al cargar archivos localmente con XMLHttpRequest, no se devuelve un estado porque no es de a 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 especifique file://en su nombre de archivo:

readTextFile("file:///C:/your/path/to/file.txt");
Majid Laissi
fuente
2
De hecho, estoy trabajando en esto en una Mac, así que ¿seguiría especificando el archivo: // ??
Danny
11
intenta poner file:///User/Danny/Desktop/javascriptWork/testing.txten la barra de URL de tu navegador y ver si puedes ver el archivo ..
Majid Laissi
21
no necesita ser una ruta absoluta ... esto funcionó para mí bien: readTextFile ('Properties / version.txt'); ¡Gracias!
Sonic Soul
2
Como estamos leyendo desde un servidor web, deberíamos tener async configurado en true. Si se trata de una localbúsqueda simple, entonces establecer asíncrono en falseestá bien, pero onreadystatechangeno es necesario mientras está configurado en falso. Aquí está la documentación: w3schools.com/ajax/ajax_xmlhttprequest_send.asp
rambossa
149
Esto no funcionará en Chrome (posiblemente otros navegadores) obtendrá "Las solicitudes de origen cruzado solo son compatibles con esquemas de protocolo: http, data, chrome, chrome-extension, https, chrome-extension-resource".
Rick Burgess
102

Visite Javascripture ! Y vaya a la sección readAsText y pruebe el ejemplo. Usted será capaz de saber cómo la readAsText función de FileReader funciona.

    <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>
Amit Chaurasia
fuente
14
Los enlaces son agradables, pero debe "citar siempre 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". Vea ¿Cómo escribo una buena respuesta ?
4ae1e1
16
Este ejemplo trata con 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
@ 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) podrían tener la pregunta sobre cómo hacerlo localmente.
Simon Forsberg el
102

Después de la introducción de fetch 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 Firefox , pero parece que la implementación de Chromefetch no admite el file:///esquema de URL en la fecha de redacción de esta actualización (probada en Chrome 68).

Actualización-2 (descargo de responsabilidad):

Esta técnica no funciona con Firefox por encima de la versión 68 (9 Jul, 2019) por la misma razón (seguridad) como Chrome: CORS request not HTTP. Ver https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSRequestNotHttp .

Abdelaziz Mokhnache
fuente
44
¡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 adiós a los buenos ol'FileReaders y HttpRequests (y no los extrañaré un poco;)
Armfoot
1
Pero, ¿cómo puede usar el texto y ponerlo en una variable de cadena para usarlo en otro lugar? (Sigo 'indefinido' sin importar lo que le haga).
not2qubit
2
@ not2qubit recuperar un archivo de texto es una operación asincrónica. Está indefinido porque está utilizando la variable antes de que el archivo se lea por completo. Debe usarlo dentro de la devolución de llamada prometida o usar algo como los operadores de JavaScript "async aguardan".
Abdelaziz Mokhnache
13
Fetch API cannot load file:///C:/Users/path/to/file/file.txt. URL scheme must be "http" or "https" for CORS request.
Jacob Schneider
1
compatibilidad del navegador: developer.mozilla.org/en-US/docs/Web/API/…
Sam Murphy
39 

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>
Expandir fragmento

Poornachander K
fuente
99
No estoy seguro de que esto responda a esta pregunta de 4 años. El OP no está cargando documentos, están intentando leer el archivo de texto en el mismo directorio desde una ruta. Y si va a responder preguntas tan antiguas, al menos escriba un breve resumen de por qué cree que su respuesta ahora es mejor que las demás o cómo ha cambiado el idioma desde la pregunta para garantizar una nueva respuesta.
Matthew Ciaramitaro
1
Utilizando mi propia entrada de carga de archivos existente html, copiando las líneas de a var reader = new FileReader();través reader.readAsBinaryString(..), lee el contenido de mi archivo de texto. Limpio, elegante, funciona como un encanto. La mejor respuesta para mí en este hilo: ¡gracias!
Gene Bo
18

Jon Perryman,

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 entrada del usuario) al sistema de archivos de su computadora.

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

Un archivo hta puede contener js o vbs dentro de él.

Pero el ejecutable hta funcionará solo en sistemas Windows.

Este es el comportamiento estándar del navegador.

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

Gorrión
fuente
Este es el comentario que estaba buscando. Todos ponen código para que el usuario ingrese el archivo como etiqueta de entrada, pero la pregunta es tomar el archivo automáticamente de la ruta mencionada en el código por el usuario. ¡Gracias!
Kumar Kartikeya
13

Probablemente ya lo haya intentado, escriba "falso" de la siguiente manera:

 rawFile.open("GET", file, false);
momen
fuente
12

Intenta crear dos funciones:

function getData(){       //this will read file and send information to other function
       var xmlhttp;

       if (window.XMLHttpRequest) {
           xmlhttp = new XMLHttpRequest();               
       }           
       else {               
           xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");               
       }

       xmlhttp.onreadystatechange = function () {               
           if (xmlhttp.readyState == 4) {                   
             var lines = xmlhttp.responseText;    //*here we get all lines from text file*

             intoArray(lines);     *//here we call function with parameter "lines*"                   
           }               
       }

       xmlhttp.open("GET", "motsim1.txt", true);
       xmlhttp.send();    
}

function intoArray (lines) {
   // splitting all text data into array "\n" is splitting data from each new line
   //and saving each new line as each element*

   var lineArr = lines.split('\n'); 

   //just to check if it works output lineArr[index] as below
   document.write(lineArr[2]);         
   document.write(lineArr[3]);
}
Motsim Mansoor
fuente
Para qué navegadores funciona esto (parece que 6 personas lo probaron :-))
Xan-Kun Clark-Davis
11

otro ejemplo: mi lector con la clase FileReader

<html>
    <head>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
        <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
        <script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
    </head>
    <body>
        <script>
            function PreviewText() {
            var oFReader = new FileReader();
            oFReader.readAsDataURL(document.getElementById("uploadText").files[0]);
            oFReader.onload = function (oFREvent) {
                document.getElementById("uploadTextValue").value = oFREvent.target.result; 
                document.getElementById("obj").data = oFREvent.target.result;
            };
        };
        jQuery(document).ready(function(){
            $('#viewSource').click(function ()
            {
                var text = $('#uploadTextValue').val();
                alert(text);
                //here ajax
            });
        });
        </script>
        <object width="100%" height="400" data="" id="obj"></object>
        <div>
            <input type="hidden" id="uploadTextValue" name="uploadTextValue" value="" />
            <input id="uploadText" style="width:120px" type="file" size="10"  onchange="PreviewText();" />
        </div>
        <a href="#" id="viewSource">Source file</a>
    </body>
</html>
websky
fuente
2
Archivo de salida base64 salida
VP
6

Solución moderna:

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

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

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 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>
joe
fuente
6

Usando la función Fetch y async

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

logFileText('file.txt')
barro32
fuente
77
Obtengo 'El esquema de URL debe ser "http" o "https" para la solicitud CORS ".
Qwerty
Gracias, funciona para mi!
oscarAguayo
5

Esto podría ayudar 

    var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");

    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            alert(xmlhttp.responseText);
        }
    }

    xmlhttp.open("GET", "sample.txt", true);
    xmlhttp.send();
Sameera R.
fuente
2

Además de algunas de las respuestas anteriores, esta solución modificada funcionó para mí.

<input id="file-upload-input" type="file" class="form-control" accept="*" />

....

let fileInput  = document.getElementById('file-upload-input');
let files = fileInput.files;

//Use createObjectURL, this should address any CORS issues.
let filePath = URL.createObjectURL(files[0]);

....

function readTextFile(filePath){
    var rawFile = new XMLHttpRequest();
    rawFile.open("GET", filePath , true);
    rawFile.send(null);

    rawFile.onreadystatechange = function (){
        if(rawFile.readyState === 4){
            if(rawFile.status === 200 || rawFile.status == 0){
                var allText = rawFile.responseText;
                console.log(allText);
            }
        }
    }     
}
Fabii
fuente
2 
function readTextFile(file) {
    var rawFile = new XMLHttpRequest(); // XMLHttpRequest (often abbreviated as XHR) is a browser object accessible in JavaScript that provides data in XML, JSON, but also HTML format, or even a simple text using HTTP requests.
    rawFile.open("GET", file, false); // open with method GET the file with the link file ,  false (synchronous)
    rawFile.onreadystatechange = function ()
    {
        if(rawFile.readyState === 4) // readyState = 4: request finished and response is ready
        {
            if(rawFile.status === 200) // status 200: "OK"
            {
                var allText = rawFile.responseText; //  Returns the response data as a string
                console.log(allText); // display text on the console
            }
        }
    }
    rawFile.send(null); //Sends the request to the server Used for GET requests with param null
}

readTextFile("text.txt"); //<= Call function ===== don't need "file:///..." just the path

- leer el texto del archivo desde javascript
- Texto de registro de la consola desde el archivo usando javascript
- Google chrome y mozilla firefox

en mi caso tengo esta estructura de archivos:ingrese la descripción de la imagen aquí

el resultado de console.log:
ingrese la descripción de la imagen aquí

nadir hamidou
fuente
A continuación se muestra el error: El acceso a XMLHttpRequest en 'file: /// C: / {myLocalPath} PropertiesFile.txt' from origin 'null' ha sido bloqueado por la política CORS: las solicitudes de origen cruzado solo son compatibles con esquemas de protocolo: http, datos, cromo, extensión de cromo, https.
Kumar Kartikeya
1 
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {            
                $.ajax({`enter code here`
                    url: "TextFile.txt",
                    dataType: "text",
                    success: function (data) {                 
                            var text = $('#newCheckText').val();
                            var str = data;
                            var str_array = str.split('\n');
                            for (var i = 0; i < str_array.length; i++) {
                                // Trim the excess whitespace.
                                str_array[i] = str_array[i].replace(/^\s*/, "").replace(/\s*$/, "");
                                // Add additional code here, such as:
                                alert(str_array[i]);
                                $('#checkboxes').append('<input type="checkbox"  class="checkBoxClass" /> ' + str_array[i] + '<br />');
                            }
                    }                   
                });
                $("#ckbCheckAll").click(function () {
                    $(".checkBoxClass").prop('checked', $(this).prop('checked'));
                });
        });
    </script>
</head>
<body>
    <div id="checkboxes">
        <input type="checkbox" id="ckbCheckAll" class="checkBoxClass"/> Select All<br />        
    </div>
</body>
</html>
adithya
fuente
1

Obtenga datos de archivos locales en carga js (data.js):

function loadMyFile(){
    console.log("ut:"+unixTimeSec());
    loadScript("data.js?"+unixTimeSec(), loadParse);
}
function loadParse(){
    var mA_=mSdata.split("\n");
    console.log(mA_.length);
}
function loadScript(url, callback){

    var script = document.createElement("script")
    script.type = "text/javascript";

    if (script.readyState){  //IE
        script.onreadystatechange = function(){
            if (script.readyState == "loaded" ||
                    script.readyState == "complete"){
                script.onreadystatechange = null;
                callback();
            }
        };
    } else {  //Others
        script.onload = function(){
            callback();
        };
    }

    script.src = url;
    document.getElementsByTagName("head")[0].appendChild(script);
}
function hereDoc(f) {
  return f.toString().
      replace(/^[^\/]+\/\*![^\r\n]*[\r\n]*/, "").
      replace(/[\r\n][^\r\n]*\*\/[^\/]+$/, "");
}
function unixTimeSec(){
    return Math.round( (new Date()).getTime()/1000);
}

archivo de data.js como:

var mSdata = hereDoc(function() {/*!
17,399
1237,399
BLAHBLAH
BLAHBLAH
155,82
194,376
*/});

Dynamic UnixTime queryString evita el almacenamiento en caché.

AJ trabaja en la web http: //.

Lo Vega
fuente
¿Por qué no utiliza la sintaxis literal de la plantilla ES6 para cadenas multilínea? (ver developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… )
Sapphire_Brick
1

Las llamadas locales AJAX en Chrome no son compatibles debido a la política del mismo origen.

El mensaje de error en Chrome es así: "Las solicitudes de origen cruzado no son compatibles con los esquemas de protocolo: http, data, chrome, chrome-extension, https".

Esto significa que Chrome crea un disco virtual para cada dominio para mantener los archivos servidos por el dominio utilizando protocolos http / https. Cualquier acceso a archivos fuera de este disco virtual está restringido bajo la misma política de origen. Las solicitudes y respuestas de AJAX ocurren en http / https, por lo tanto, no funcionarán para archivos locales.

Firefox no establece esa restricción, por lo tanto, su código funcionará correctamente en Firefox. Sin embargo, también hay soluciones para Chrome: consulte aquí .

Sushant T
fuente
0

Puedes importar mi biblioteca: 

<script src="https://www.editeyusercontent.com/preview/1c_hhRGD3bhwOtWwfBD8QofW9rD3T1kbe/[email protected]"></script>
Expandir fragmento

entonces, la función fetchfile(path)devolverá el archivo cargado 

<script src="https://www.editeyusercontent.com/preview/1c_hhRGD3bhwOtWwfBD8QofW9rD3T1kbe/code.js"></script>
<script>console.log(fetchfile("file.txt"))</script>
Expandir fragmento

Tenga en cuenta: en Google Chrome si el código HTML es local, aparecerán errores, pero guardar el código HTML y los archivos en línea y luego ejecutar el archivo HTML en línea funciona.


fuente
0

Para leer el texto de un archivo local JavaScriptmediante Chrome, el navegador Chrome debe ejecutarse con el argumento --allow-file-access-from-filespara permitir que JavaScript acceda al archivo local, luego puede leerlo de XmlHttpRequestla siguiente manera:

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
   if (xmlhttp.readyState == 4) {
       var allText = xmlhttp.responseText;          
            }
        };
xmlhttp.open("GET", file, false);
xmlhttp.send(null);
Ali Ezzat Odeh
fuente
0

¿Cómo leer un archivo local?

Al usar esto, cargará un archivo mediante loadText (), luego JS esperará asincrónicamente hasta que se lea y cargue el archivo, luego ejecutará la función readText (), lo que le permitirá continuar con su lógica JS normal (también puede escribir un intento de captura bloque en la función loadText () en caso de que surja algún error) pero para este ejemplo lo mantengo al mínimo.

async function loadText(url) {
    text = await fetch(url);
    //awaits for text.text() prop 
    //and then sends it to readText()
    readText(await text.text());
}

function readText(text){
    //here you can continue with your JS normal logic
    console.log(text);
}

loadText('test.txt');
D.Snap
fuente
Parece que tienes un caso de función-itis
Sapphire_Brick
0

Lo sé, llego tarde a esta fiesta. Déjame mostrarte lo que tengo.

Esta es una simple lectura del archivo de texto

var path = C:\\established-titles\\orders\\shopify-orders.txt
var fs = require('fs')
fs.readFile(path , 'utf8', function(err, data) {
  if (err) throw err;
  console.log('OK: ' + filename);
  console.log(data)
});

Espero que esto ayude.

Aljohn Yamaro
fuente