Como ler um arquivo de texto local?

371

Estou tentando escrever um leitor de arquivo de texto simples, criando uma função que leva no caminho do arquivo e converte cada linha de texto em uma matriz de caracteres, mas não está funcionando.

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();
}

o que há de errado aqui?

Isso ainda não parece funcionar depois de alterar um pouco o código de uma revisão anterior e agora está me dando umaXMLHttpRequest exceção 101.

Eu testei isso no Firefox e ele funciona, mas no Google Chrome simplesmente não funciona e continua me dando uma exceção 101. Como posso fazer isso funcionar não apenas no Firefox, mas também em outros navegadores (especialmente o Chrome )?

javascript file-io xmlhttprequest Danny
fonte
O que especificamente está acontecendo. Não há nada na matriz? Ou apenas as coisas "erradas" ..?
precisa saber é o seguinte
Você está testando em uma máquina local? Certifique-se de testar para um statusdos 0, bem como 200.
Jeffrey Sweeney
11
@JeffreySweeney sim, estou testando isso em uma máquina local. Tenho guardado o arquivo de texto no mesmo lugar que os javascripts e html
Danny

Respostas:

311

Você precisa verificar o status 0 (como ao carregar arquivos localmente XMLHttpRequest, você não recebe um status retornado porque não é 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);
}

E especifique file://no seu nome de arquivo:

readTextFile("file:///C:/your/path/to/file.txt");
Majid Laissi
fonte
2
Na verdade, eu estou trabalhando nisso em um mac, então eu ainda estaria especificando o arquivo: // ??
Danny
11
tente colocar file:///User/Danny/Desktop/javascriptWork/testing.txtna barra de url do seu navegador e veja se você pode ver o arquivo ..
Majid Laissi
21
não precisa ser um caminho absoluto .. isso funcionou para mim muito bem: readTextFile ('Properties / version.txt'); obrigado!
Sonic Soul
2
Como estamos lendo de um servidor da web, devemos ter o async definido como true. Se essa foi uma localpesquisa simples , a configuração de assíncrona para falseestá ok, mas onreadystatechangenão é necessária enquanto estiver definida como falsa. Aqui está a documentação: w3schools.com/ajax/ajax_xmlhttprequest_send.asp
rambossa
149
Isso não funcionará no Chrome (possivelmente outros navegadores): "Solicitações de origem cruzada são suportadas apenas para esquemas de protocolo: http, dados, chrome, chrome-extension, https, chrome-extension-resource".
Rick Burgess
102

Visite Javascripture ! E vá na seção readAsText e tente o exemplo. Você será capaz de saber como o readAsText função 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
fonte
14
Os links são bons, mas você deve "sempre citar a parte mais relevante de um link importante, caso o site de destino esteja inacessível ou fique permanentemente offline". Consulte Como escrevo uma boa resposta .
4ae1e1
16
Este exemplo lida com um arquivo de texto de entrada do usuário, mas acho que a pergunta era sobre um arquivo local do servidor.
31515 Kirby5
@ S.Kirby Como dito pelo OP em resposta a uma pergunta sobre se é executado localmente ou em um servidor remoto: é tudo local. tudo em uma pasta nada mais. . Além disso, outras pessoas (como eu) podem ter a pergunta sobre como fazê-lo localmente.
Simon Forsberg
102

Após a introdução da API de busca no javascript, a leitura do conteúdo do arquivo não pôde ser mais simples.

lendo um arquivo de texto

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

lendo um arquivo json

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

Atualização 30/07/2018 (isenção de responsabilidade):

Essa técnica funciona bem no Firefox , mas parece que a implementação do Chromefetch não suporta o file:///esquema de URLs na data em que essa atualização foi escrita (testada no Chrome 68).

Atualização-2 (isenção de responsabilidade):

Esta técnica não funciona com Firefox acima da versão 68 (09 de julho de 2019), pela mesma razão (segurança) como Chrome: CORS request not HTTP. Consulte https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSRequestNotHttp .

Abdelaziz Mokhnache
fonte
4
Brilhante! Citando o padrão de busca: "fornece manipulação consistente de: esquemas de URL, redirecionamentos, semântica de origem cruzada, CSP, trabalhadores de serviço, conteúdo misto Referer". Acho que isso significa adeus aos bons ol'FileReaders e HttpRequests (e não vou perdê-las um pouco;)
Armfoot
11
Mas como você pode usar o texto e colocá-lo em uma variável de string para uso em outro lugar? (Eu continuo recebendo 'indefinido' não importa o que eu faço para ele.)
not2qubit
2
@ not2qubit buscar um arquivo de texto é uma operação assíncrona. Você está ficando indefinido porque está usando a variável antes que o arquivo seja completamente lido. Você deve usá-lo dentro do retorno de chamada da promessa ou usar algo como operadores javascript "async waiting".
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
11
compatibilidade do navegador: developer.mozilla.org/pt-BR/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 snippet

Poornachander K
fonte
9
Não sei se isso responde a essa pergunta de 4 anos. O OP não está carregando documentos, eles estão tentando ler o arquivo de texto no mesmo diretório a partir de um caminho. E se você vai responder perguntas dessa idade, pelo menos, escreva um breve resumo de por que você acha que sua resposta agora é melhor que as outras ou de como o idioma mudou desde a pergunta para garantir uma nova resposta.
Matthew Ciaramitaro
11
Usando meu próprio arquivo existente, carregue a entrada html - copiando as linhas do var reader = new FileReader();meio reader.readAsBinaryString(..)- ele lê o conteúdo do meu arquivo de texto. Limpo, elegante, funciona como um encanto. Melhor resposta neste tópico para mim - obrigado!
Gene Bo
18

Jon Perryman,

Sim, o js pode ler arquivos locais (consulte FileReader ()), mas não automaticamente: o usuário deve passar o arquivo ou uma lista de arquivos para o script com um html <input type=file>.

Com js, é possível processar (exibição de exemplo) o arquivo ou a lista de arquivos, algumas de suas propriedades e o conteúdo do arquivo ou arquivos.

O que o js não pode fazer por razões de segurança é acessar automaticamente (sem a entrada do usuário) ao sistema de arquivos do seu computador.

Para permitir que o js acesse o fs local automaticamente, é necessário criar não um arquivo html com o js dentro dele, mas um documento hta.

Um arquivo hta pode conter js ou vbs dentro dele.

Mas o executável hta funcionará apenas em sistemas Windows.

Esse é o comportamento padrão do navegador.

Também o google chrome trabalhou na API do fs, mais informações aqui: http://www.html5rocks.com/en/tutorials/file/filesystem/

Pardal
fonte
este é o comentário que eu estava procurando. Todos estão colocando o código para a entrada do arquivo pelo usuário como tag de entrada, mas a questão é retirar o arquivo automaticamente do caminho mencionado pelo código pelo usuário. Obrigado!
Kumar Kartikeya 27/01
13

Provavelmente você já experimentou, digite "false" da seguinte maneira:

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

Tente criar duas funções:

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
fonte
Para que navegadores faz este trabalho (parece 6 pessoas tentou fazê-lo :-))
Xan-Kun Clark-Davis
11

outro exemplo - meu leitor com a classe 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
fonte
2
Saída base64 de retorno de arquivo
VP
6

Solução moderna:

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

Quando o usuário faz o upload de um arquivo de texto por meio dessa entrada, ele será registrado no console. Aqui está uma demonstração funcional do jsbin .

Aqui está uma versão mais detalhada:

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

Atualmente (janeiro de 2020) isso funciona apenas no Chrome e Firefox, verifique aqui a compatibilidade se você estiver lendo isso no futuro: https://developer.mozilla.org/en-US/docs/Web/API/Blob/text

Em navegadores antigos, isso deve 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
fonte
6

Usando a função Buscar e Assíncrona

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

logFileText('file.txt')
barro32
fonte
7
Recebo 'O esquema de URL deve ser "http" ou "https" para solicitação do CORS.
Qwerty
Obrigado, funciona para mim!
oscarAguayo 6/03
5

Isso pode ajudar, 

    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.
fonte
2

Adicionando a algumas das respostas acima, esta solução modificada funcionou para mim.

<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
fonte
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

- leia o texto do arquivo javascript
- o texto do log do console do arquivo usando javascript
- firefox do Google chrome e mozilla;

no meu caso, eu tenho essa estrutura de arquivos:insira a descrição da imagem aqui

o resultado console.log:
insira a descrição da imagem aqui

nadir hamidou
fonte
Abaixo está o erro que mostra: O acesso ao XMLHttpRequest no 'arquivo: /// C: / {myLocalPath} PropertiesFile.txt' da origem 'null' foi bloqueado pela política do CORS: solicitações de origem cruzada são suportadas apenas para esquemas de protocolos: http, dados, chrome, chrome-extension, https.
Kumar Kartikeya 24/01
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
fonte
1

Obtenha dados do arquivo local em js (data.js) load:

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);
}

arquivo de data.js como:

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

O unixTime dinâmico queryString impede o cache.

AJ trabalha na web http: //.

Lo Vega
fonte
por que você não usa a sintaxe literal do modelo ES6 para cadeias de linhas múltiplas? (consulte developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/… )
Sapphire_Brick
1

As chamadas locais AJAX no Chrome não são suportadas devido à mesma política de origem.

A mensagem de erro no chrome é assim: "Solicitações de origem cruzada não são suportadas para esquemas de protocolo: http, dados, chrome, extensão de cromo, https".

Isso significa que o chrome cria um disco virtual para cada domínio para manter os arquivos servidos pelo domínio usando protocolos http / https. Qualquer acesso a arquivos fora deste disco virtual é restrito sob a mesma política de origem. Solicitações e respostas AJAX acontecem em http / https, portanto, não funcionam para arquivos locais.

O Firefox não impõe essa restrição; portanto, seu código funcionará bem no Firefox. No entanto, também existem soluções alternativas para o chrome: veja aqui .

Sushant T
fonte
0

Você pode importar minha biblioteca: 

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

então, a função fetchfile(path)retornará o arquivo carregado 

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

Observação: no Google Chrome, se o código HTML for local, os erros aparecerão, mas salvar o código HTML e os arquivos on-line e executar o arquivo HTML on-line funciona.


fonte
0

Para ler um texto de arquivo local JavaScriptusando o chrome, o navegador chrome deve ser executado com o argumento --allow-file-access-from-filespara permitir que o JavaScript acesse o arquivo local, você pode lê-lo usando XmlHttpRequesto seguinte:

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
fonte
0

Como ler um arquivo local?

Ao usar isso, você carregará um arquivo por loadText () e o JS aguardará de forma assíncrona até que o arquivo seja lido e carregado, depois exibirá a função readText (), permitindo que você continue com sua lógica JS normal (você também pode escrever uma tentativa de captura bloco na função loadText () no caso de surgir algum erro), mas neste exemplo eu o mantenho no 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
fonte
Parece que você tem um caso de function-itis
Sapphire_Brick
0

Eu sei, estou atrasado nesta festa. Deixe-me mostrar o que eu tenho.

Esta é uma leitura simples do arquivo 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)
});

Eu espero que isso ajude.

Aljohn Yamaro
fonte