Jak odczytać lokalny plik tekstowy?

371

Próbuję napisać prosty czytnik plików tekstowych, tworząc funkcję, która pobiera ścieżkę pliku i konwertuje każdy wiersz tekstu na tablicę znaków, ale to nie działa.

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

Co tu idzie nie tak?

To wciąż nie działa po zmianie kodu trochę z poprzedniej wersji, a teraz daje mi XMLHttpRequestwyjątek 101.

Przetestowałem to na Firefoksie i działa, ale w Google Chrome to po prostu nie działa i wciąż daje mi wyjątek 101. Jak mogę to włączyć w nie tylko Firefoksie, ale także w innych przeglądarkach (zwłaszcza Chrome )?

javascript file-io xmlhttprequest Danny
źródło

Co konkretnie się dzieje? Czy nic nie ma w tablicy? A może po prostu „złe” rzeczy…?

PinkElephantsOnParade

Czy testujesz na komputerze lokalnym? Upewnij się, że dla testu statusz 0jak 200.

Jeffrey Sweeney

1

@JeffreySweeney tak Testuję to na komputerze lokalnym. Przechowałem plik tekstowy w tym samym miejscu co javascripts i HTML

Danny

311

Musisz sprawdzić status 0 (ponieważ przy ładowaniu plików lokalnie XMLHttpRequestnie otrzymujesz statusu zwracanego, ponieważ nie pochodzi on od 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);
}

I podaj file://w nazwie pliku:

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

Majid Laissi
źródło

2

Właściwie pracuję nad tym na komputerze Mac, więc czy nadal będę określał plik: // ??

Danny

11

spróbuj wstawić file:///User/Danny/Desktop/javascriptWork/testing.txtpasek adresu przeglądarki i sprawdź, czy możesz zobaczyć plik.

Majid Laissi

21

nie musi to być ścieżka bezwzględna ... działało to dla mnie w porządku: readTextFile ('Properties / version.txt'); dzięki!

Sonic Soul

2

Ponieważ czytamy z serwera, powinniśmy ustawić asynchronię na true. Jeśli było to proste localwyszukiwanie, ustawienie asynchronizacji na falseOK jest prawidłowe, ale onreadystatechangenie jest potrzebne, gdy jest ustawione na false. Oto dokumentacja: w3schools.com/ajax/ajax_xmlhttprequest_send.asp

rambossa

149

To nie zadziała w Chrome (możliwe inne przeglądarki), otrzymasz komunikat „Żądania krzyżowe są obsługiwane tylko dla schematów protokołów: http, dane, chrome, chrome-extension, https, chrome-extension-resource”.

Rick Burgess,

102

Odwiedź Javascripture ! Idź do sekcji readAsText i wypróbuj przykład. Będziesz mógł wiedzieć, jak działa funkcja readAsText FileReadera .

    <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
źródło

14

Linki są fajne, ale „zawsze powinieneś podać najistotniejszą część ważnego linku, na wypadek gdyby strona docelowa była nieosiągalna lub została trwale wyłączona”. Zobacz Jak napisać dobrą odpowiedź .

4ae1e1

16

Ten przykład dotyczy pliku tekstowego wprowadzanego przez użytkownika, ale myślę, że pytanie dotyczyło pliku lokalnego dla serwera.

S. Kirby,

@ S.Kirby Jak powiedział OP w odpowiedzi na pytanie, czy jest uruchamiany lokalnie, czy na zdalnym serwerze: wszystko jest lokalne. wszystko w jednym folderze nic więcej. . Poza tym inne osoby (takie jak ja) mogą mieć pytanie, jak to zrobić lokalnie.

Simon Forsberg

102

Po wprowadzeniu apletu pobierania w javascript czytanie zawartości pliku nie może być prostsze.

czytanie pliku tekstowego

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

czytanie pliku json

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

Aktualizacja 30/07/2018 (wyłączenie odpowiedzialności):

Ta technika działa dobrze w Firefox , ale wydaje się, że Chrome jest fetchwdrożenie nie obsługuje file:///schematu URL w chwili pisania tej aktualizacji (przetestowane w Chrome 68).

Aktualizacja 2 (zrzeczenie się odpowiedzialności):

Technika ta nie działa w Firefoksie powyższej wersji 68 (lip 9, 2019) dla tego samego powodu (bezpieczeństwo), jak Chrome: CORS request not HTTP. Zobacz https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSRequestNotHttp .

Abdelaziz Mokhnache
źródło

4

Znakomity! Cytując standard Fetch: „zapewnia spójną obsługę: schematów URL, przekierowań, semantyki krzyżowania, CSP, pracowników usług, mieszanej zawartości Referer”. Myślę, że oznacza to pożegnanie z dobrymi ol'FileReaders i HttpRequests (i nie będę ich trochę tęsknił;)

Armfoot

1

Ale jak możesz użyć tekstu i umieścić go w zmiennej łańcuchowej, aby użyć go gdzie indziej? (

Nadal

2

@ not2qubit pobieranie pliku tekstowego jest operacją asynchroniczną. Stajesz się niezdefiniowany, ponieważ używasz zmiennej przed całkowitym odczytaniem pliku. Musisz użyć go w wywołaniu zwrotnym obietnicy lub użyć czegoś takiego jak operatory javascript „async oczekują”.

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

kompatybilność przeglądarki: 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>

Rozwiń fragment kodu

Poornachander K
źródło

9

Nie jestem pewien, czy to odpowiada na to 4-letnie pytanie. OP nie przesyła dokumentów, próbują odczytać plik tekstowy z tego samego katalogu ze ścieżki. A jeśli masz zamiar odpowiadać na pytania, ten stary przynajmniej napisz krótkie podsumowanie, dlaczego uważasz, że twoja odpowiedź jest teraz lepsza niż inne lub jak zmienił się język od pytania, aby uzasadnić nową odpowiedź.

Matthew Ciaramitaro

1

Korzystając z mojego istniejącego pliku wejściowego do przesyłania html - kopiując linie od var reader = new FileReader();zera reader.readAsBinaryString(..)- czyta zawartość mojego pliku tekstowego. Czysty, elegancki, działa jak urok. Najlepsza odpowiedź w tym wątku dla mnie - dzięki!

Gene Bo

18

Jon Perryman,

Tak, js może czytać pliki lokalne (patrz FileReader ()), ale nie automatycznie: użytkownik musi przekazać plik lub listę plików do skryptu za pomocą html <input type=file>.

Następnie za pomocą js można przetwarzać (przykładowy widok) plik lub listę plików, niektóre ich właściwości oraz zawartość pliku lub plików.

Ze względów bezpieczeństwa js nie może uzyskać automatycznego dostępu do systemu plików swojego komputera (bez udziału użytkownika).

Aby umożliwić js automatyczny dostęp do lokalnego fs, konieczne jest utworzenie nie pliku html z js w środku, ale dokument hta.

Plik hta może zawierać w sobie js lub vbs.

Ale plik wykonywalny hta będzie działał tylko w systemach Windows.

Jest to standardowe zachowanie przeglądarki.

Google Chrome działał również w interfejsie FS, więcej informacji tutaj: http://www.html5rocks.com/en/tutorials/file/filesystem/

Wróbel
źródło

to jest komentarz, którego szukałem. Każdy umieszcza kod do wprowadzenia pliku przez użytkownika jako znacznik wejściowy, ale pytanie dotyczy automatycznego pobrania pliku ze ścieżki wymienionej w kodzie przez użytkownika. Dzięki!

Kumar Kartikeya

13

Prawdopodobnie już go wypróbujesz, wpisz „false” w następujący sposób:

 rawFile.open("GET", file, false);

moment
źródło

12

Spróbuj utworzyć dwie funkcje:

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
źródło

Dla jakich przeglądarek to działa (wydaje się, że wypróbowało to 6 osób :-))

Xan-Kun Clark-Davis

11

inny przykład - mój czytnik z klasą 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
źródło

2

Plik zwraca wynik wyjściowy base64

VP

6

Korzystanie z funkcji pobierania i asynchronizacji

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

logFileText('file.txt')

barro32
źródło

7

Pojawia się komunikat „Schemat URL musi być„ http ”lub„ https ”dla żądania CORS.”

Qwerty

Dzięki, działa dla mnie!

oscarAguayo

5

To może pomóc

    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.
źródło

5

Nowoczesne rozwiązanie:

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

Gdy użytkownik prześle plik tekstowy przez to wejście, zostanie on zalogowany do konsoli. Oto działające demo jsbin .

Oto bardziej szczegółowa wersja:

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

Obecnie (styczeń 2020) działa to tylko w Chrome i Firefox, sprawdź tutaj, jeśli czytasz to w przyszłości: https://developer.mozilla.org/en-US/docs/Web/API/Blob/text

W starszych przeglądarkach powinno to działać:

<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
źródło

2

Dodając do niektórych powyższych odpowiedzi, to zmodyfikowane rozwiązanie działało dla mnie.

<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
źródło

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

- czytaj tekst pliku z javascript
- tekst dziennika konsoli z pliku za pomocą javascript
- Google Chrome i Mozilla Firefox

w moim przypadku mam taką strukturę plików:

wynik w pliku console.log:

nadir hamidou
źródło

Poniżej znajduje się błąd pokazujący: Dostęp do XMLHttpRequest w pliku: /// C: / {myLocalPath} PropertiesFile.txt 'from origin' null 'został zablokowany przez zasady CORS: Żądania krzyżowego pochodzenia są obsługiwane tylko dla schematów protokołów: http, dane, chrome, chrome-extension, 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
źródło

1

Pobierz lokalne dane pliku w pliku 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);
}

plik data.js jak:

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

Dynamic UnixTime queryString zapobiega buforowaniu.

AJ działa w sieci http: //.

Lo Vega
źródło

dlaczego nie używasz literalnej składni szablonu ES6 dla ciągów wielowierszowych? (patrz developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… )

Sapphire_Brick

1

Lokalne połączenia AJAX w Chrome nie są obsługiwane ze względu na zasady tego samego pochodzenia.

Komunikat o błędzie w Chrome wygląda tak: „Żądania krzyżowe nie są obsługiwane dla schematów protokołów: http, dane, chrome, chrome-extension, https”.

Oznacza to, że chrome tworzy dysk wirtualny dla każdej domeny, aby zachować pliki obsługiwane przez domenę przy użyciu protokołów http / https. Każdy dostęp do plików poza tym dyskiem wirtualnym jest ograniczony na podstawie tej samej zasady pochodzenia. Żądania i odpowiedzi AJAX pojawiają się na http / https, dlatego nie będą działać dla plików lokalnych.

Firefox nie nakłada takich ograniczeń, dlatego Twój kod będzie działał z powodzeniem w przeglądarce Firefox. Istnieją jednak również obejścia dla chrome: patrz tutaj .

Sushant T.
źródło

0

Możesz zaimportować moją bibliotekę:

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

Rozwiń fragment kodu

następnie funkcja fetchfile(path)zwróci przesłany plik

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

Rozwiń fragment kodu

Uwaga: w Google Chrome, jeśli kod HTML jest lokalny, pojawią się błędy, ale zapisanie kodu HTML i plików online, a następnie uruchomienie pliku HTML online działa.

źródło

0

Aby odczytać tekst pliku lokalnego za JavaScriptpomocą chrome, przeglądarka chrome powinna uruchomić z argumentem, --allow-file-access-from-filesaby umożliwić JavaScript dostęp do pliku lokalnego, a następnie możesz go odczytać, XmlHttpRequestwykonując następujące czynności:

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
źródło

0

Jak odczytać plik lokalny?

Korzystając z tego, załadujesz plik za pomocą loadText (), a następnie JS asynchronicznie poczeka, aż plik zostanie odczytany i załadowany, a następnie wyucza funkcję readText (), umożliwiając kontynuację normalnej logiki JS (możesz również napisać próbny chwyt blok na funkcji loadText () w przypadku wystąpienia błędu), ale w tym przykładzie utrzymuję go na minimalnym poziomie.

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
źródło

Wygląda na to, że masz przypadek funkcji-itis

Sapphire_Brick

0

Wiem, że jestem spóźniony na tej imprezie. Pozwól, że pokażę ci, co mam.

Jest to prosty odczyt pliku tekstowego

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

Mam nadzieję, że to pomoże.

Aljohn Yamaro
źródło

Jak odczytać lokalny plik tekstowy?

Odpowiedzi:

Aktualizacja 30/07/2018 (wyłączenie odpowiedzialności):

Aktualizacja 2 (zrzeczenie się odpowiedzialności):

Lokalne połączenia AJAX w Chrome nie są obsługiwane ze względu na zasady tego samego pochodzenia.