Як прочитати локальний текстовий файл?

371

Я намагаюся написати простий читач текстових файлів, створивши функцію, яка бере шлях до файлу і перетворює кожен рядок тексту в масив char, але це не працює.

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

Що тут не так?

Це все ще не працює, після зміни коду трохи від попередньої редакції, і тепер це дає мені XMLHttpRequestвиняток 101.

Я перевірив це на Firefox, і він працює, але в Google Chrome він просто не працюватиме, і він надає мені виняток 101. Як змусити це працювати не лише на Firefox, але і на інших браузерах (особливо Chrome )?

javascript file-io xmlhttprequest

— Денні
джерело

Що конкретно відбувається. Немає нічого в масиві? Або просто "неправильні" речі ..?

— PinkElephantsOnParade

Ви тестуєте на локальній машині? Переконайтеся , що тест на statusз 0, а також 200.

— Jeffrey Sweeney

1

@JeffreySweeney так, я тестую це на локальній машині. Я зберігав текстовий файл там же, де і javascripts та html

— Danny

311

Вам потрібно перевірити стан 0 (як при завантаженні файлів локально XMLHttpRequest, статус не повертається, оскільки він не з 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);
}

І вкажіть file://у своєму файлі:

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

— Маджид Лаїссі
джерело

2

Я фактично працюю над цим на mac, тож би я все-таки вказував файл: // ??

— Денні

11

спробуйте помістити file:///User/Danny/Desktop/javascriptWork/testing.txtв URL-адресу свого веб-переглядача і побачити, чи можете ви бачити файл ..

— Majid Laissi

21

це не повинно бути абсолютним шляхом. це працювало для мене просто чудово: readTextFile ('Властивості / версія.txt'); Дякую!

— Sonic Soul

2

Оскільки ми читаємо з веб-сервера, нам слід встановити асинхронізацію true. Якщо це був простий localпошук, то встановлення асинхронізації в falseпорядку, але onreadystatechangeвоно не потрібне, коли воно встановлено на значення false. Ось документація: w3schools.com/ajax/ajax_xmlhttprequest_send.asp

— rambossa

149

Це не буде працювати в Chrome (можливо, інші веб-переглядачі), ви отримаєте "Перехресні запити походження підтримуються лише для протокольних схем: http, data, chrome, chrome-extension, https, chrome-extension-resource."

— Рік Берджесс

102

Відвідайте Javascripture ! І перейдіть до розділу readAsText і спробуйте приклад. Ви зможете дізнатися, як працює функція readAsText FileReader .

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

— Аміт Чаурасія
джерело

14

Посилання є приємними, але ви завжди повинні "цитувати найрелевантнішу частину важливого посилання, на випадок, якщо цільовий сайт недоступний або виходить постійно в офлайн". Див. Як написати гарну відповідь .

— 4ae1e1

16

У цьому прикладі йдеться про введений користувачем текстовий файл, але я думаю, що питання стосувалося локального для сервера файлу.

— С. Кірбі

@ S.Kirby Як сказала ОП у відповідь на запитання про те, чи працює він локально або на віддаленому сервері: це все локально. все в одній папці більше нічого. . Крім того, у інших людей (як я) може виникнути питання про те, як це зробити на місцевому рівні.

— Саймон Форсберг

102

Після введення вибору api в JavaScript, читання вмісту файлів не може бути простішим.

читання текстового файлу

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

читання файлу json

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

Оновлення 30.07.2018 (відмова від відповідальності):

Цей метод відмінно працює в Firefox , але схоже , Chrome «s fetchреалізація не підтримує file:///схему URL на момент написання цього оновлення (перевірено в Chrome 68).

Update-2 (відмова від відповідальності):

Ця методика не працює з Firefox версії 68 (9 липня 2019 року) з тієї ж причини (безпеки), що і Chrome : CORS request not HTTP. Дивіться https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSRequestNotHttp .

— Абделазіз Мохначе
джерело

4

Блискуче! Цитуючи стандарт Fetch: "забезпечує послідовне поводження з: URL-схемами, переадресаціями, семантикою між походженнями, CSP, службовцями, змішаним вмістом Referer". Я думаю, це означає прощання з добрими ol'FileReaders та HttpRequests (і я їх трохи не пропущу;)

— Armfoot

1

Але як можна використовувати текст і помістити його в змінну рядка для використання в інших місцях? (Я продовжую отримувати "невизначений", незалежно від того, що я їм роблю.)

— not2qubit

2

@ not2qubit - отримання текстового файлу - це операція асинхронізації. Ви не визначаєтесь, оскільки використовуєте змінну до повного зчитування файлу. Ви повинні використовувати його всередині зворотного виклику обіцянок або використовувати щось на зразок операторів javascript "async wait".

— Абделазіз Мохначе

13

Fetch API cannot load file:///C:/Users/path/to/file/file.txt. URL scheme must be "http" or "https" for CORS request.

— Яків Шнайдер

1

сумісність веб-переглядача: developer.mozilla.org/en-US/docs/Web/API/…

— Сем Мерфі

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>

Розгорніть фрагмент

— Бідолашник К
джерело

9

Я не впевнений, що це відповідає на це 4-річне запитання. ОП не завантажує документи, вони намагаються прочитати текстовий файл в одному каталозі з контуру. І якщо ви збираєтесь відповідати на запитання цієї старої, принаймні напишіть короткий підсумок того, чому ви вважаєте, що ваша відповідь зараз краща за інші або як змінилася мова з моменту запитання, щоб отримати нову відповідь.

— Метью Ціарамітаро

1

За допомогою власного наявного файлу html для завантаження вхідного файлу - копіювання рядків var reader = new FileReader();наскрізь reader.readAsBinaryString(..)- він читає вміст мого текстового файлу. Чистий, елегантний, працює як шарм. Найкраща відповідь у цій темі для мене - дякую!

— Джин Бо

18

Джон Перріман,

Так, js може читати локальні файли (див. FileReader ()), але не автоматично: користувач повинен передати файл або список файлів у скрипт із html <input type=file>.

Тоді за допомогою js можна обробити (приклад перегляду) файлу чи списку файлів, деяких їх властивостей та вмісту файлу чи файлів.

Що js не може зробити з міркувань безпеки, це автоматичний доступ (без введення користувача) до файлової системи його комп'ютера.

Щоб дозволити js автоматично отримувати доступ до локальних файлів, потрібно створити не html-файл із js всередині нього, а hta-документ.

Хта-файл може містити js або vbs всередині нього.

Але виконуваний файл hta буде працювати тільки в системах Windows.

Це стандартна поведінка браузера.

Також Google Chrome працював у програмі fs api, більше інформації тут: http://www.html5rocks.com/en/tutorials/file/filesystem/

— Горобчик
джерело

це коментар, що я шукав. Усі ставлять код для введення користувачем файлу як вхідного тегу, але питання полягає у автоматичному виведенні файлу із шляху, зазначеного у коді користувачем. Дякую!

— Кумар Картікея

13

Імовірно, ви вже спробували це, введіть "false" так:

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

— momen
джерело

12

Спробуйте створити дві функції:

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

— Моцим Мансур
джерело

Для яких браузерів це працює (схоже, 6 людей спробували це :-))

— Xan-Kun Clark-Davis

11

інший приклад - мій читач з класом 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
джерело

2

Вихід файлу base64 вихід

— VP

6

Використання функції Fetch і async

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

logFileText('file.txt')

— barro32
джерело

7

Я отримую "Схема URL-адреси повинна бути" http "або" https "для запиту CORS."

— Qwerty

Дякую, працює для мене!

— oscarAguayo

5

Це може допомогти,

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

— Самера Р.
джерело

5

Сучасне рішення:

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

Коли користувач завантажує текстовий файл через цей вхід, він буде записаний на консоль. Ось робоча демонстрація jsbin .

Ось більш докладна версія:

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

Наразі (січень 2020 року) це працює лише в Chrome та Firefox, перевірте їх на сумісність, якщо ви читаєте це в майбутньому: https://developer.mozilla.org/en-US/docs/Web/API/Blob/text

У старих браузерах це має працювати:

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

— Джо
джерело

2

Додавши до деяких вищевказаних відповідей, це змінене рішення працювало для мене.

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

— Фабій
джерело

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
- Текст журналу консолі з файлу за допомогою javascript
- Google chrome та mozilla firefox

у моєму випадку у мене є така структура файлів:

результат console.log:

— надір хаміду
джерело

Нижче показана помилка: Доступ до XMLHttpRequest у файлі '/// C: / {myLocalPath} PropertiesFile.txt' від походження 'null' був заблокований політикою CORS: Запити перехресного походження підтримуються лише для протокольних схем: http, дані, хром, розширення хрому, https.

— Кумар Картікея,

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>

— адітія
джерело

1

Отримати дані локальних файлів у завантаженні 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);
}

файл data.js, як:

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

динамічний unixTime queryString запобігає кешування.

AJ працює в Інтернеті http: //.

— Ло Вега
джерело

чому ви не використовуєте буквальний синтаксис шаблону ES6 для багаторядкових рядків? (див. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… )

— Sapphire_Brick

1

Місцеві дзвінки AJAX у Chrome не підтримуються через політику того самого походження.

Повідомлення про помилку на chrome виглядає так: "Запити крос-походження не підтримуються для протокольних схем: http, data, chrome, chrome-extension, https."

Це означає, що хром створює віртуальний диск для кожного домену, щоб зберігати файли, які обслуговуються доменом, використовуючи протоколи http / https. Будь-який доступ до файлів поза цим віртуальним диском обмежений відповідно до тієї ж політики оригіналу. Запити та відповіді AJAX трапляються на http / https, тому не працюватимуть для локальних файлів.

Firefox такого обмеження не ставить, тому ваш код буде працювати на Firefox щасливо. Однак для хрому також існують шляхи вирішення: дивіться тут .

— Сушант Т
джерело

0

Ви можете імпортувати мою бібліотеку:

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

Розгорніть фрагмент

тоді функція fetchfile(path)поверне завантажений файл

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

Розгорніть фрагмент

Зверніть увагу: у Google Chrome, якщо код HTML локальний, з’являться помилки, але збереження HTML-коду та файлів в Інтернеті, а також запуск інтернет-файлу HTML, працює.

0

Для того, щоб прочитати текст локального файлу за JavaScriptдопомогою хрому, браузер chrome має запуститися з аргументом, --allow-file-access-from-filesщоб дозволити JavaScript отримати доступ до локального файлу, а потім можна прочитати його, використовуючи XmlHttpRequestнаступне:

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
   if (xmlhttp.readyState == 4) {
       var allText = xmlhttp.responseText;          
            }
        };
xmlhttp.open("GET", file, false);
xmlhttp.send(null);

— Алі Еззат Оде
джерело

0

Як прочитати локальний файл?

Використовуючи це, ви завантажите файл loadText (), тоді JS буде асинхронно чекати, поки файл буде прочитаний і завантажений після цього, він буде виконувати функцію readText (), що дозволяє продовжувати свою звичайну логіку JS (ви також можете написати спробу лову блокувати функцію loadText () у разі виникнення помилки), але для цього прикладу я тримаю її на мінімальному рівні.

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
джерело

Схоже, у вас є випадок function-itis

— Sapphire_Brick

0

Я знаю, я спізнююсь на цю вечірку. Дозвольте показати вам, що я маю.

Це просте читання текстового файлу

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

Я сподіваюся, що це допомагає.

— Альхон Ямаро
джерело