Làm thế nào để đọc một tệp văn bản địa phương?

371

Tôi đang cố gắng viết một trình đọc tệp văn bản đơn giản bằng cách tạo một hàm có trong đường dẫn của tệp và chuyển đổi từng dòng văn bản thành một mảng char, nhưng nó không hoạt động.

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

Điều gì đang xảy ra ở đây?

Điều này dường như vẫn không hoạt động sau khi thay đổi mã một chút so với sửa đổi trước đó và bây giờ nó mang lại cho tôi một XMLHttpRequestngoại lệ 101.

Tôi đã thử nghiệm điều này trên Firefox và nó hoạt động, nhưng trong Google Chrome, nó sẽ không hoạt động và nó tiếp tục cho tôi một Ngoại lệ 101. Làm cách nào tôi có thể làm việc này trên không chỉ Firefox mà cả các trình duyệt khác (đặc biệt là Chrome )?

javascript file-io xmlhttprequest

— Daniel
nguồn

Điều gì đặc biệt đang xảy ra. Có gì trong mảng không? Hay chỉ là những thứ "sai" ..?

— PinkElephantsOnParade

Bạn đang thử nghiệm trên một máy cục bộ? Hãy chắc chắn để kiểm tra đối với một statussố 0cũng như 200.

— Jeffrey Sweeney

1

@JeffreySweeney vâng Tôi đang thử nghiệm điều này trên một máy cục bộ. Tôi đã lưu trữ tệp văn bản ở cùng một nơi với javascripts và html

— Danny

311

Bạn cần kiểm tra trạng thái 0 (vì khi tải tệp cục bộ với XMLHttpRequest, bạn không nhận được trạng thái trả về vì không phải từ 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);
}

Và chỉ định file://trong tên tệp của bạn:

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

— Thiếu tá Laissi
nguồn

2

Tôi thực sự đang làm việc trên mac này, vì vậy tôi vẫn sẽ chỉ định tệp: // ??

— Danny

11

hãy thử đặt file:///User/Danny/Desktop/javascriptWork/testing.txtvào thanh url của trình duyệt của bạn và xem bạn có thể xem tệp không ..

— Majid Laissi

21

nó không cần phải là một đường dẫn tuyệt đối .. điều này đối với tôi rất tốt: readTextFile ('Properties / version.txt'); cảm ơn!

— Linh hồn Sonic

2

Vì chúng tôi đang đọc từ máy chủ web, chúng tôi nên đặt async thành true. Nếu đây là một localtìm kiếm đơn giản thì đặt async thành falseok, nhưng onreadystatechangekhông cần thiết trong khi nó được đặt thành false. Dưới đây là tài liệu: w3schools.com/ajax/ajax_xmlhttprequest_send.asp

— rambossa

149

Điều này sẽ không hoạt động trong Chrome (sở hữu các trình duyệt khác) mà bạn sẽ nhận được "Yêu cầu nguồn gốc chéo chỉ được hỗ trợ cho các sơ đồ giao thức: http, dữ liệu, chrome, chrome-extension, https, chrome-extension-resource."

— Rick Burgess

102

Truy cập Javascripture ! Và đi đến phần readAsText và thử ví dụ. Bạn sẽ có thể biết chức năng readAsText của FileReader hoạt động như thế nào .

    <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
nguồn

14

Liên kết là tốt, nhưng bạn nên "luôn trích dẫn phần có liên quan nhất của một liên kết quan trọng, trong trường hợp trang web mục tiêu không thể truy cập được hoặc ngoại tuyến vĩnh viễn." Xem Làm thế nào để tôi viết một câu trả lời tốt .

— 4ae1e1

16

Ví dụ này liên quan đến tệp văn bản đầu vào của người dùng, nhưng tôi nghĩ rằng câu hỏi là về một tệp cục bộ với máy chủ.

— S. Kirby

@ S.Kirby Như OP đã nói khi trả lời câu hỏi về việc nó chạy cục bộ hay trên một máy chủ từ xa: tất cả đều là cục bộ. Tất cả trong một thư mục không có gì khác. . Ngoài ra, những người khác (như tôi) có thể có câu hỏi về cách thực hiện tại địa phương.

— Simon Forsberg

102

Sau khi giới thiệu tìm nạp api trong javascript, việc đọc nội dung tệp không thể đơn giản hơn.

đọc một tập tin văn bản

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

đọc một tập tin json

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

Cập nhật 30/07/2018 (từ chối trách nhiệm):

Kỹ thuật này hoạt động tốt trong Firefox , nhưng có vẻ như việc triển khai của Chromefetch không hỗ trợ file:///lược đồ URL tại ngày viết bản cập nhật này (đã được thử nghiệm trong Chrome 68).

Cập nhật-2 (từ chối trách nhiệm):

Kỹ thuật này không hoạt động với Firefox ở trên phiên bản 68 (ngày 9 tháng 7 năm 2019) vì lý do (bảo mật) tương tự như Chrome : CORS request not HTTP. Xem https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSRequestNotHttp .

— Abdelaziz Mokhnache
nguồn

4

Xuất sắc! Trích dẫn Tiêu chuẩn tìm nạp: "cung cấp xử lý nhất quán: sơ đồ URL, Chuyển hướng, ngữ nghĩa nguồn gốc chéo, CSP, Nhân viên dịch vụ, Nội dung hỗn hợp Referer". Tôi đoán điều này có nghĩa là tạm biệt với ol'FileReaders và HttpRequests tốt (và tôi sẽ không nhớ họ một chút;)

— Armfoot

1

Nhưng làm thế nào bạn có thể sử dụng văn bản và đặt nó vào một biến chuỗi để sử dụng ở nơi khác? (Tôi tiếp tục nhận được 'không xác định' bất kể tôi làm gì với nó.)

— not2qubit

2

@ not2qubit tìm nạp tệp văn bản là một hoạt động không đồng bộ. Bạn đang không xác định được vì bạn đang sử dụng biến trước khi tệp được đọc hoàn toàn. Bạn phải sử dụng nó bên trong lời gọi lại lời hứa hoặc sử dụng một cái gì đó như các toán tử "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

khả năng tương thích trình duyệt: developer.mozilla.org/en-US/docs/Web/API/

— mẹo

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>

Mở rộng đoạn trích

— Poornachander K
nguồn

9

Tôi không chắc câu trả lời này cho câu hỏi 4 tuổi này. OP không tải lên tài liệu, họ đang cố đọc tệp văn bản trong cùng một thư mục từ một đường dẫn. Và nếu bạn định trả lời câu hỏi cũ này thì ít nhất hãy viết một bản tóm tắt ngắn về lý do tại sao bạn nghĩ câu trả lời của bạn tốt hơn câu hỏi khác hoặc ngôn ngữ đã thay đổi như thế nào kể từ câu hỏi để đảm bảo câu trả lời mới.

— Matthew Ciaramitaro

1

Sử dụng tệp html hiện tại của riêng tôi tải lên html - sao chép các dòng từ var reader = new FileReader();xuyên qua reader.readAsBinaryString(..)- nó đọc nội dung của tệp văn bản của tôi. Sạch sẽ, thanh lịch, làm việc như một nét duyên dáng. Câu trả lời tốt nhất trong chủ đề này cho tôi - cảm ơn!

— Gene Bo

18

Jon Perryman,

Có js có thể đọc các tệp cục bộ (xem FileReader ()) nhưng không tự động: người dùng phải truyền tệp hoặc danh sách các tệp vào tập lệnh bằng html <input type=file> .

Sau đó, với js, có thể xử lý (ví dụ xem) tệp hoặc danh sách các tệp, một số thuộc tính của chúng và tệp hoặc nội dung tệp.

Điều js không thể làm vì lý do bảo mật là truy cập tự động (không có đầu vào của người dùng) vào hệ thống tệp của máy tính của anh ta.

Để cho phép js tự động truy cập vào fs cục bộ là cần thiết để tạo không phải tệp html có js bên trong mà là tài liệu hta.

Một tập tin hta có thể chứa js hoặc vbs bên trong nó.

Nhưng thực thi hta sẽ chỉ hoạt động trên các hệ thống windows.

Đây là hành vi trình duyệt tiêu chuẩn.

Ngoài ra google chrome đã làm việc tại api fs, nhiều infos tại đây: http://www.html5rocks.com/en/tutorials/file/filesystem/

— Chim sẻ
nguồn

đây là bình luận những gì tôi đang tìm kiếm. Mọi người đặt mã cho người dùng nhập tệp làm thẻ đầu vào, nhưng câu hỏi là lấy tệp tự động từ đường dẫn được đề cập trong mã bởi người dùng. Cảm ơn!

— Kumar Kartikeya

13

Chắc chắn bạn đã thử nó, gõ "false" như sau:

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

— xác ướp
nguồn

12

Hãy thử tạo hai chức năng:

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
nguồn

Đối với những gì trình duyệt này hoạt động (có vẻ như 6 người đã thử nó :-))

— Xan-Kun Clark-Davis

11

ví dụ khác - trình đọc của tôi với lớp 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
nguồn

2

Trả về tập tin cơ sở đầu ra64

— VP

6

Sử dụng chức năng Tìm nạp và không đồng bộ

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

logFileText('file.txt')

— barro32
nguồn

7

Tôi nhận được 'lược đồ URL phải là "http" hoặc "https" cho yêu cầu CORS.'

— Qwerty

Cảm ơn, làm việc cho tôi!

— oscarAguayo

5

Điều này có thể giúp,

    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.
nguồn

5

Giải pháp hiện đại:

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

Khi người dùng tải lên một tệp văn bản thông qua đầu vào đó, nó sẽ được ghi vào bàn điều khiển. Đây là bản demo jsbin hoạt động .

Đây là một phiên bản dài dòng hơn:

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

Hiện tại (tháng 1 năm 2020), tính năng này chỉ hoạt động trong Chrome và Firefox, hãy kiểm tra tính tương thích ở đây nếu bạn đọc nó trong tương lai: https://developer.mozilla.org/en-US/docs/Web/API/Blob/text

Trên các trình duyệt cũ hơn, điều này sẽ hoạt động:

<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
nguồn

2

Thêm vào một số câu trả lời ở trên, giải pháp sửa đổi này đã làm việc cho tôi.

<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
nguồn

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

- đọc văn bản tệp từ javascript
- Bảng điều khiển nhật ký văn bản từ tệp bằng javascript
- Google chrome và mozilla firefox

trong trường hợp của tôi, tôi có cấu trúc tệp này:

kết quả console.log:

— nadir hamidou
nguồn

Dưới đây là lỗi hiển thị: Truy cập vào XMLHttpRequest tại 'tệp: /// C: / {myLocalPath} PropertiesFile.txt' từ nguồn gốc 'null' đã bị chặn bởi chính sách CORS: Yêu cầu nguồn gốc chéo chỉ được hỗ trợ cho các lược đồ giao thức: http, dữ liệu, chrome, chrome-mở rộng, 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
nguồn

1

Nhận dữ liệu tệp cục bộ trong tải 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);
}

tệp của data.js như:

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

truy vấn unixTime động ngăn chặn lưu trữ.

AJ hoạt động trong web http: //.

— Lo Vega
nguồn

Tại sao bạn không sử dụng cú pháp mẫu bằng chữ ES6 cho các chuỗi nhiều dòng? (xem developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/ mẹo )

— Sapphire_Brick

1

Các cuộc gọi AJAX cục bộ trong Chrome không được hỗ trợ do chính sách cùng nguồn gốc.

Thông báo lỗi trên chrome là như thế này: "Yêu cầu nguồn gốc chéo không được hỗ trợ cho các sơ đồ giao thức: http, dữ liệu, chrome, chrome-extension, https."

Điều này có nghĩa là chrome tạo một đĩa ảo cho mọi miền để giữ các tệp được cung cấp bởi miền bằng các giao thức http / https. Mọi quyền truy cập vào các tệp bên ngoài đĩa ảo này đều bị hạn chế theo cùng một chính sách gốc. Yêu cầu và phản hồi AJAX xảy ra trên http / https, do đó sẽ không hoạt động đối với các tệp cục bộ.

Firefox không đặt giới hạn như vậy, do đó mã của bạn sẽ hoạt động vui vẻ trên Firefox. Tuy nhiên, cũng có cách giải quyết cho chrome: xem tại đây .

— Tush
nguồn

0

Bạn có thể nhập thư viện của tôi:

<script src="https://www.editeyusercontent.com/preview/1c_hhRGD3bhwOtWwfBD8QofW9rD3T1kbe/code.js?pe=yikuansun2015@gmail.com"></script>

Mở rộng đoạn trích

Sau đó, hàm fetchfile(path)sẽ trả về tệp đã tải lên

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

Mở rộng đoạn trích

Xin lưu ý: trên Google Chrome nếu mã HTML là cục bộ, sẽ xuất hiện lỗi, nhưng lưu mã HTML và các tệp trực tuyến sau đó chạy tệp HTML trực tuyến hoạt động.

0

Để đọc văn bản tệp cục bộ thông qua JavaScriptsử dụng chrome, trình duyệt chrome phải chạy với đối số --allow-file-access-from-filesđể cho phép JavaScript truy cập tệp cục bộ, sau đó bạn có thể đọc nó bằng cách sử dụng XmlHttpRequestnhư sau:

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
nguồn

0

Làm thế nào để đọc một tập tin địa phương?

Bằng cách sử dụng điều này, bạn sẽ tải một tệp bằng loadText () sau đó JS sẽ chờ một cách không đồng bộ cho đến khi tệp được đọc và được tải sau đó nó sẽ thực hiện chức năng readText () cho phép bạn tiếp tục với logic JS bình thường của mình (bạn cũng có thể viết một lần thử chặn trên hàm loadText () trong trường hợp có bất kỳ lỗi nào phát sinh) nhưng với ví dụ này tôi giữ nó ở mức tối thiểu.

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

— Đn
nguồn

Có vẻ như bạn có trường hợp chức năng-itis

— Sapphire_Brick

0

Tôi biết, tôi đến muộn trong bữa tiệc này. Hãy để tôi chỉ cho bạn những gì tôi đã có.

Đây là một cách đọc đơn giản của tập tin văn bản

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

Tôi hi vọng cái này giúp được.

— Aljohn Yamaro
nguồn