Yerel bir metin dosyası nasıl okunur?

371

Ben dosya yolunda alır ve bir char dizisine metnin her satırı dönüştürür bir işlev oluşturarak basit bir metin dosyası okuyucu yazmaya çalışıyorum, ama çalışmıyor.

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

Burada yanlış giden ne?

Bu, kodu önceki bir revizyondan biraz değiştirdikten sonra hala işe yaramıyor ve şimdi bana bir XMLHttpRequestistisna veriyor 101.

Bunu Firefox'ta test ettim ve işe yarıyor, ancak Google Chrome'da çalışmıyor ve bana bir İstisna 101 veriyor. Bunu sadece Firefox'ta değil, diğer tarayıcılarda da (özellikle Chrome'da nasıl çalıştırabilirim) )?

javascript  file-io  xmlhttprequest 
— Danny
kaynak
Özellikle ne oluyor. Dizide hiçbir şey yok mu? Yoksa sadece "yanlış" şeyler ..?
— PinkElephantsOnParade
Yerel bir makinede test mi yapıyorsunuz? Bir için teste emin olun statusait 0yanısıra 200.
— Jeffrey Sweeney
1
@JeffreySweeney evet Bunu yerel bir makinede test ediyorum. Metin dosyasını javascripts ve html ile aynı yerde sakladım
— Danny

Yanıtlar:

311

Durum 0'ı kontrol etmeniz gerekir (dosyaları yerel olarak yüklerken olduğu gibi XMLHttpRequest, a durumundan dönmediği için bir durum döndürülmez 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);
}

Ve file://dosya adınızda belirtin :

readTextFile("file:///C:/your/path/to/file.txt");
— Majid Laissi
kaynak
2
Aslında bir mac üzerinde bu üzerinde çalışıyorum, bu yüzden hala dosyayı belirtiyor musunuz: // ??
— Danny
11
file:///User/Danny/Desktop/javascriptWork/testing.txttarayıcınızın url çubuğunu koymaya çalışın ve dosyayı görüp göremeyeceğinize bakın ..
— Majid Laissi
21
mutlak bir yol olması gerekmez .. Bu benim için iyi çalıştı: readTextFile ('Properties / version.txt'); Teşekkürler!
— Sonic Soul
2
Bir web sunucusundan okuduğumuzdan, zaman uyumsuz olarak ayarlanmış olmalıyız true. Bu basit bir localarama olsaydı, zaman uyumsuzluk ayarı falsetamam, ancak onreadystatechangefalse olarak ayarlandığında gerekli değildir. : İşte belgelerdir w3schools.com/ajax/ajax_xmlhttprequest_send.asp
— rambossa
149
Bu, Chrome'da çalışmaz (diğer tarayıcıların olasılığı) "Çapraz orijinli istekler yalnızca protokol şemaları için desteklenir: http, veri, krom, krom uzantısı, https, krom uzantısı-kaynağı."
— Rick Burgess
102

Javascripture'ı ziyaret edin ! Ve ASText okuma bölümüne gidin ve örneği deneyin. Sen nasıl mümkün olacak readAsText fonksiyonu FileReader çalışır.

    <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
kaynak
14
Bağlantılar güzel, ancak "hedef siteye erişilemiyorsa veya kalıcı olarak çevrimdışı olursa" her zaman önemli bir bağlantının en alakalı kısmını belirtmelisiniz. " Bkz . İyi bir cevabı nasıl yazarım .
— 4ae1e1
16
Bu örnek bir kullanıcı giriş metin dosyası ile ilgilenir, ancak sorunun sunucu için yerel olan bir dosya hakkında olduğunu düşünüyorum.
— S. Kirby
@ S.Kirby OP tarafından yerel olarak mı yoksa uzak bir sunucuda mı çalıştırıldığı sorusuna yanıt olarak belirtildiği gibi: hepsi yerel. hepsi tek bir klasörde başka hiçbir şey. . Ayrıca, diğer insanlar da (benim gibi) yerel olarak nasıl yapılacağı sorusuna sahip olabilir.
— Simon Forsberg
102

Javascript'te api getirme işleminden sonra, dosya içeriğini okumak daha kolay olamazdı.

metin dosyası okuma

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

json dosyasını okuma

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

Güncelleme 30/07/2018 (feragat):

Bu teknik de cezasını çalışır Firefox , ancak gibi görünüyor Krom 'ın fetchdesteklemediği uygulanması file:///(Chrome 68 test) bu güncellemeyi yazma tarihte URL şemasını.

Güncelleme-2 (feragat):

Bu teknik, Chrome ile aynı (güvenlik) nedenle 68 sürümü (9 Temmuz 2019) üzerindeki Firefox ile çalışmaz CORS request not HTTP. Bkz. Https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSRequestNotHttp .

— Abdelaziz Mokhnache
kaynak
4
Parlak! Getirme Standardı'ndan alıntı: "URL şemaları, Yönlendirmeler, Çapraz menşeli semantikler, CSP, Hizmet çalışanları, Karışık İçerik, Referer" gibi tutarlı bir işlem sağlar . " Bu iyi ol'FileReaders ve HttpRequests veda anlamına gelir (ve onları biraz özleyeceğim;)
— Armfoot
1
Ancak metni nasıl kullanabilir ve başka bir yerde kullanmak için bir dize değişkenine nasıl koyabilirsiniz? (Ne yaparsam yapayım 'undefined' almaya devam ediyorum.)
— not2qubit
2
@ not2qubit bir metin dosyası getirme zaman uyumsuz bir işlemdir. Dosya tamamen okunmadan önce değişkeni kullandığınız için tanımsız hale geliyorsunuz. Söz verilen geri arama içinde veya javascript "async await" operatörleri gibi bir şey kullanmanız gerekir.
— 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
— 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>
Snippet'i genişlet

— Poornachander K
kaynak
9
Bunun bu 4 yaşındaki soruyu cevapladığından emin değilim. OP belgeleri karşıya yüklemiyor, aynı dizindeki metin dosyasını bir yoldan okumaya çalışıyorlar. Ve bu eski soruları cevaplayacaksanız, en azından cevabınızın neden diğerlerinden daha iyi olduğunu düşündüğünüzün ya da yeni bir cevabı garanti etmek için sorudan bu yana dilin nasıl değiştiğinin kısa bir özetini yazın.
— Matthew Ciaramitaro
1
Kendi mevcut dosya yükleme girişimi kullanarak html - satırları var reader = new FileReader();içinden kopyalayarak reader.readAsBinaryString(..)- metin dosyamın içeriğini okur. Temiz, zarif, cazibe gibi çalışır. Benim için bu konudaki en iyi cevap - teşekkürler!
— Gene Bo
18

Jon Perryman,

Evet, js yerel dosyaları okuyabilir (bkz. FileReader ()) ancak otomatik olarak olamaz: kullanıcının dosyayı veya dosya listesini html ile komut dosyasına iletmesi gerekir <input type=file>.

Daha sonra js ile dosyayı veya dosya listesini, bazı özelliklerini ve dosya veya dosya içeriğini işlemek (örnek görünüm) mümkündür.

Güvenlik nedeniyle js'in yapamayacağı şey, bilgisayarının dosya sistemine otomatik olarak (kullanıcı girişi olmadan) erişmektir.

Js'nin yerel fs'ye otomatik olarak erişmesine izin vermek için içinde js olan bir html dosyası değil, bir hta belgesi oluşturmak gerekir.

Bir hta dosyası içinde js veya vbs içerebilir.

Ancak hta çalıştırılabilir dosyası yalnızca Windows sistemlerinde çalışır.

Bu standart tarayıcı davranışıdır.

Ayrıca google chrome fs api'de çalıştı, daha fazla bilgi burada: http://www.html5rocks.com/en/tutorials/file/filesystem/

— serçe
kaynak
Bu aradığım yorum. Herkes kullanıcının giriş etiketi olarak dosya girişi için kod koymak, ancak soru dosyayı otomatik olarak kullanıcı tarafından kodda belirtilen yoldan almak için. Teşekkürler!
— Kumar Kartikeya
13

Muhtemelen zaten denediniz, aşağıdaki gibi "false" yazın:

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

İki işlev oluşturmayı deneyin:

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 Mansörü
kaynak
Bu işi yapan tarayıcılar için (6 kişi denedi gibi görünüyor :-))
— Xan-Kun Clark-Davis
11

diğer örnek - FileReader sınıflı okuyucum

<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
kaynak
2
Dosya dönüş base64 çıkışı
— VP
6

Getirme ve zaman uyumsuzluk işlevini kullanma

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

logFileText('file.txt')
— barro32
kaynak
7
'URL şeması CORS isteği için "http" veya "https" olmalıdır. "
— Qwerty
Teşekkürler, benim için çalışıyor!
— oscarAguayo
5

Bu yardımcı olabilir, 

    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.
kaynak
5

Modern çözüm:

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

Kullanıcı bu giriş yoluyla bir metin dosyası yüklediğinde, konsola kaydedilir. İşte çalışan bir jsbin demosu .

İşte daha ayrıntılı bir sürüm:

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

Şu anda (Ocak 2020) bu yalnızca Chrome ve Firefox'ta çalışıyor, gelecekte okuyacaksanız uyumluluk için buraya bakın: https://developer.mozilla.org/en-US/docs/Web/API/Blob/text

Daha eski tarayıcılarda bunun çalışması gerekir:

<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
kaynak
2

Yukarıdaki cevapların bazılarına ek olarak, bu değiştirilmiş çözüm benim için çalıştı.

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

- javascript dosya metnini okuyun - javascript
kullanarak dosyadan Konsol günlük metni
- Google krom ve Mozilla firefox

benim durumumda dosyaları bu yapısı var:resim açıklamasını buraya girin

console.log sonucu:
resim açıklamasını buraya girin

— nadir hamidou
kaynak
Aşağıda gösterilen hata: XMLHttpRequest kaynağına 'file: /// C: / {myLocalPath} PropertiesFile.txt' kaynağından 'null' erişimi CORS ilkesi tarafından engellendi: Çapraz kökenli istekler yalnızca protokol şemaları için desteklenir: http, veri, krom, krom uzantısı, 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
kaynak
1

Yerel dosya verilerini js (data.js) yüklemesinde alın:

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

data.js dosyası:

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

dynamic unixTime queryString önbelleğe alınmayı önler.

AJ web http: // çalışır.

— Lo Vega
kaynak
neden çok satırlı dizeler için ES6 şablon değişmez sözdizimini kullanmıyorsunuz? (bkz. developer.mozilla.org/tr-TR/docs/Web/JavaScript/Reference/… )
— Sapphire_Brick
1

Chrome'da yerel AJAX çağrıları, aynı köken politikası nedeniyle desteklenmiyor.

Chrome'daki hata mesajı şuna benzer: "Protokol şemaları için çapraz menşe istekleri desteklenmez: http, data, chrome, chrome-extension, https."

Bu, kromun http / https protokollerini kullanarak alan tarafından sunulan dosyaları tutmak için her alan için bir sanal disk oluşturduğu anlamına gelir. Bu sanal diskin dışındaki dosyalara erişim, aynı başlangıç ​​ilkesi kapsamında kısıtlanmıştır. AJAX istekleri ve yanıtları http / https'de gerçekleşir, bu nedenle yerel dosyalar için çalışmaz.

Firefox böyle bir kısıtlama getirmediğinden, kodunuz Firefox'ta mutlu bir şekilde çalışacaktır. Ancak krom için de geçici çözümler var: buraya bakın .

— Sushant T
kaynak
0

Kütüphanemi içe aktarabilirsiniz: 

<script src="https://www.editeyusercontent.com/preview/1c_hhRGD3bhwOtWwfBD8QofW9rD3T1kbe/code.js?pe=yikuansun2015@gmail.com"></script>
Snippet'i genişlet

daha sonra, işlev fetchfile(path)yüklenen dosyayı döndürür 

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

Lütfen dikkat: Google Chrome'da HTML kodu yerel ise hatalar görünür, ancak HTML kodunu ve dosyaları çevrimiçi kaydettikten sonra çevrimiçi HTML dosyasını çalıştırarak çalışır.

0

JavaScriptChrome kullanarak yerel bir dosya metnini okumak için , krom tarayıcısı --allow-file-access-from-filesJavaScript'in yerel dosyaya erişmesine izin vermek için argümanla çalışmalıdır, ardından XmlHttpRequestaşağıdaki gibi kullanarak okuyabilirsiniz :

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

Yerel bir dosya nasıl okunur?

Bunu kullanarak loadText () ile bir dosya yükleyeceksiniz, ardından JS normal JS mantığınıza devam etmenizi sağlayan readText () işlevini görüntüleyecek şekilde dosya okunana ve yüklenene kadar eşzamansız olarak bekleyecektir (ayrıca bir deneme yakalama da yazabilirsiniz) Herhangi bir hata ortaya çıktığında loadText () fonksiyonunda engelle) ancak bu örnek için minimum düzeyde tutuyorum.

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
kaynak
Görünüşe göre bir fonksiyon-itis
— Sapphire_Brick
0

Biliyorum, bu partiye geç kaldım. Size ne bulduğumu göstereyim.

Bu metin dosyasının basit bir okumasıdır

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

Umarım bu yardımcı olur.

— Aljohn Yamaro
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.