Bagaimana cara membaca file teks lokal?

371

Saya mencoba menulis pembaca file teks sederhana dengan membuat fungsi yang mengambil jalur file dan mengubah setiap baris teks menjadi array char, tetapi tidak berfungsi.

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

Apa yang salah di sini?

Ini masih tidak berfungsi setelah mengubah kode sedikit dari revisi sebelumnya dan sekarang memberi saya XMLHttpRequestpengecualian 101.

Saya sudah menguji ini pada Firefox dan itu berfungsi, tetapi di Google Chrome itu tidak akan berfungsi dan itu terus memberi saya Pengecualian 101. Bagaimana saya bisa membuat ini berfungsi tidak hanya pada Firefox, tetapi juga pada browser lain (terutama Chrome )?

javascript file-io xmlhttprequest Danny
sumber
Apa yang terjadi secara spesifik. Apakah tidak ada dalam array? Atau hanya hal-hal yang "salah" ..?
PinkElephantsOnParade
Apakah Anda menguji pada mesin lokal? Pastikan untuk menguji untuk statusdari 0serta 200.
Jeffrey Sweeney
1
@ JeffreySweeney ya saya sedang menguji ini pada mesin lokal. Saya telah menyimpan file teks di tempat yang sama dengan javascripts dan html
Danny

Jawaban:

311

Anda perlu memeriksa status 0 (seperti saat memuat file secara lokal XMLHttpRequest, Anda tidak mendapatkan status yang dikembalikan karena itu bukan dari 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);
}

Dan tentukan file://dalam nama file Anda:

readTextFile("file:///C:/your/path/to/file.txt");
Majid Laissi
sumber
2
Saya sebenarnya sedang mengerjakan ini di mac, jadi apakah saya masih akan menentukan file: // ??
Danny
11
coba letakkan file:///User/Danny/Desktop/javascriptWork/testing.txtdi bar url browser Anda dan lihat apakah Anda dapat melihat file ..
Majid Laissi
21
tidak perlu menjadi path absolut .. ini berfungsi baik untuk saya: readTextFile ('Properties / version.txt'); Terima kasih!
Sonic Soul
2
Karena kita membaca dari server web, kita harus menyetel async ke true. Jika ini adalah localpencarian sederhana maka pengaturan async menjadi falseok, tetapi onreadystatechangetidak diperlukan saat itu disetel ke false. Berikut dokumentasinya: w3schools.com/ajax/ajax_xmlhttprequest_send.asp
rambossa
149
Ini tidak akan berfungsi di Chrome (kemungkinan browser lain) Anda akan mendapatkan "Permintaan lintas asal hanya didukung untuk skema protokol: http, data, chrome, ekstensi chrome, https, chrome-extension-resource."
Rick Burgess
102

Kunjungi Javascripture ! Dan buka bagian readAsText dan coba contohnya. Anda akan dapat mengetahui bagaimana fungsi readAsText dari FileReader bekerja.

    <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
sumber
14
Tautan bagus, tetapi Anda harus "selalu mengutip bagian yang paling relevan dari tautan penting, jika situs target tidak dapat dijangkau atau offline secara permanen." Lihat Bagaimana cara menulis jawaban yang baik .
4ae1e1
16
Contoh ini berkaitan dengan file teks input pengguna, tapi saya pikir pertanyaannya adalah tentang file yang bersifat lokal ke server.
S. Kirby
@ S. Kirby Seperti yang dikatakan oleh OP dalam menanggapi pertanyaan tentang apakah itu dijalankan secara lokal atau pada server jarak jauh: semuanya lokal. semua dalam satu folder tidak lain. . Selain itu, orang lain (seperti saya) mungkin memiliki pertanyaan tentang cara melakukannya secara lokal.
Simon Forsberg
102

Setelah pengenalan mengambil api di javascript, membaca konten file tidak bisa lebih sederhana.

membaca file teks

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

membaca file json

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

Pembaruan 30/07/2018 (penafian):

Teknik ini bekerja dengan baik di Firefox , tetapi tampaknya seperti Chrome 's fetchpelaksanaan tidak mendukung file:///skema URL pada tanggal menulis update ini (diuji di Chrome 68).

Pembaruan-2 (penafian):

Teknik ini tidak bekerja dengan Firefox di atas versi 68 (Jul 9, 2019) untuk (keamanan) alasan yang sama seperti Chrome: CORS request not HTTP. Lihat https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSRequestNotHttp .

Abdelaziz Mokhnache
sumber
4
Cemerlang! Mengutip Standar Pengambilan: "memberikan penanganan yang konsisten terhadap: skema URL, Pengalihan, semantik asal-asal, CSP, Pekerja layanan, Konten Campuran, Referer". Saya kira ini berarti selamat tinggal untuk para pembalap yang baik. FileFileReaders dan HttpRequests (dan saya tidak akan sedikit pun merindukan mereka;)
Armfoot
1
Tetapi bagaimana Anda bisa menggunakan teks dan memasukkannya ke dalam variabel string untuk digunakan di tempat lain? (Saya terus mendapatkan 'tidak terdefinisi' tidak peduli apa yang saya lakukan untuk itu.)
not2qubit
2
@ not2qubit mengambil file teks adalah operasi async. Anda tidak terdefinisi karena Anda menggunakan variabel sebelum file dibaca sepenuhnya. Anda harus menggunakannya di dalam callback janji atau menggunakan sesuatu seperti operator "async await" javascript.
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
kompatibilitas browser: 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>
Luaskan cuplikan

Poornachander K
sumber
9
Saya tidak yakin ini menjawab pertanyaan berusia 4 tahun ini. OP tidak mengunggah dokumen, mereka mencoba membaca file teks dalam direktori yang sama dari path. Dan jika Anda akan menjawab pertanyaan ini, paling tidak tulislah ringkasan singkat mengapa menurut Anda jawaban Anda sekarang lebih baik daripada yang lain atau bagaimana bahasanya telah berubah sejak pertanyaan untuk mendapatkan jawaban baru.
Matius Ciaramitaro
1
Menggunakan input unggahan file html saya sendiri yang ada - menyalin garis dari var reader = new FileReader();melalui reader.readAsBinaryString(..)- itu membaca isi file teks saya. Bersih, elegan, bekerja seperti pesona. Jawaban terbaik di utas ini untuk saya - terima kasih!
Gene Bo
18

Jon Perryman,

Ya, js dapat membaca file lokal (lihat FileReader ()) tetapi tidak secara otomatis: pengguna harus meneruskan file atau daftar file ke skrip dengan html <input type=file>.

Kemudian dengan js dimungkinkan untuk memproses (contoh tampilan) file atau daftar file, beberapa properti mereka dan file atau konten file.

Yang tidak bisa dilakukan js karena alasan keamanan adalah mengakses secara otomatis (tanpa input pengguna) ke sistem file komputernya.

Untuk memungkinkan js untuk mengakses ke fs lokal secara otomatis diperlukan untuk membuat bukan file html dengan js di dalamnya tetapi dokumen hta.

File hta dapat berisi js atau vbs di dalamnya.

Tetapi hta executable hanya akan bekerja pada sistem windows.

Ini adalah perilaku browser standar.

Juga google chrome bekerja di fs api, info lebih lanjut di sini: http://www.html5rocks.com/en/tutorials/file/filesystem/

Burung gereja
sumber
ini adalah komentar yang saya cari. Semua orang menempatkan kode untuk entri pengguna file sebagai tag input, tetapi pertanyaannya adalah untuk mengambil file secara otomatis dari jalur yang disebutkan dalam kode oleh pengguna. Terima kasih!
Kumar Kartikeya
13

Mungkin Anda sudah mencobanya, ketik "false" sebagai berikut:

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

Coba buat dua fungsi:

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
sumber
Untuk apa browser bekerja ini (tampaknya 6 orang mencobanya :-))
Xan-Kun Clark-Davis
11

contoh lain - pembaca saya dengan kelas 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
sumber
2
Pengembalian file base64 output
VP
6

Solusi modern:

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

Ketika pengguna mengunggah file teks melalui input itu, itu akan dicatat ke konsol. Inilah demo jsbin yang berfungsi .

Ini versi yang lebih verbose:

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

Saat ini (Januari 2020) ini hanya berfungsi di Chrome dan Firefox, periksa di sini untuk kompatibilitas jika Anda membaca ini di masa depan: https://developer.mozilla.org/en-US/docs/Web/API/Blob/text

Pada browser lama, ini seharusnya berfungsi:

<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
sumber
6

Menggunakan fungsi Ambil dan asinkron

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

logFileText('file.txt')
barro32
sumber
7
Saya mendapatkan 'Skema URL harus "http" atau "https" untuk permintaan CORS.'
Qwerty
Terima kasih, bekerja untuk saya!
oscarAguayo
5

Ini mungkin membantu, 

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

Menambah beberapa jawaban di atas, solusi yang dimodifikasi ini bekerja untuk saya.

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

- Baca teks file dari javascript
- Teks log konsol dari file menggunakan javascript
- Google chrome dan mozilla firefox

dalam kasus saya, saya memiliki struktur file ini:masukkan deskripsi gambar di sini

hasil console.log:
masukkan deskripsi gambar di sini

nadir hamidou
sumber
Di bawah ini adalah kesalahan yang menunjukkan: Akses ke XMLHttpRequest di 'file: /// C: / {myLocalPath} PropertiesFile.txt' from origin 'null' telah diblokir oleh kebijakan CORS: Permintaan asal silang hanya didukung untuk skema protokol: http, data, 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
sumber
1

Dapatkan data file lokal di js (data.js) muat:

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

file data.js seperti:

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

dynamic unixTime queryString mencegah cache.

AJ bekerja di web http: //.

Lo Vega
sumber
mengapa Anda tidak menggunakan sintaks literal templat ES6 untuk string multiline? (lihat developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… )
Sapphire_Brick
1

Panggilan AJAX lokal di Chrome tidak didukung karena kebijakan asal yang sama.

Pesan kesalahan pada chrome adalah seperti ini: "Permintaan lintas asal tidak didukung untuk skema protokol: http, data, chrome, ekstensi chrome, https."

Ini berarti bahwa chrome membuat disk virtual untuk setiap domain untuk menjaga file yang dilayani oleh domain menggunakan protokol http / https. Setiap akses ke file di luar disk virtual ini dibatasi berdasarkan kebijakan asal yang sama. Permintaan dan tanggapan AJAX terjadi pada http / https, oleh karena itu tidak akan berfungsi untuk file lokal.

Firefox tidak memberikan batasan seperti itu, karena itu kode Anda akan bekerja dengan senang hati di Firefox. Namun ada solusi untuk chrome juga: lihat di sini .

Sushant T
sumber
0

Anda dapat mengimpor perpustakaan saya: 

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

kemudian, fungsi fetchfile(path)akan mengembalikan file yang diunggah 

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

Harap perhatikan: di Google Chrome jika kode HTML lokal, kesalahan akan muncul, tetapi menyimpan kode HTML dan file online kemudian menjalankan file HTML online berfungsi.


sumber
0

Untuk membaca teks file lokal melalui JavaScriptmenggunakan chrome, browser chrome harus dijalankan dengan argumen --allow-file-access-from-filesuntuk memungkinkan JavaScript untuk mengakses file lokal, maka Anda dapat membacanya menggunakan XmlHttpRequestseperti berikut:

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

Bagaimana cara membaca file lokal?

Dengan menggunakan ini, Anda akan memuat file dengan loadText () lalu JS akan secara asinkron menunggu sampai file tersebut dibaca dan dimuat setelah itu akan memeriksa fungsi readText () yang memungkinkan Anda untuk melanjutkan dengan logika JS normal Anda (Anda juga dapat menulis try catch blokir pada fungsi loadText () dalam hal terjadi kesalahan) tetapi untuk contoh ini saya menyimpannya seminimal mungkin.

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
sumber
Sepertinya Anda memiliki kasus function-itis
Sapphire_Brick
0

Saya tahu, saya terlambat di pesta ini. Biarkan saya menunjukkan kepada Anda apa yang saya dapatkan.

Ini adalah pembacaan file teks sederhana

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

Saya harap ini membantu.

Aljohn Yamaro
sumber