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

371

Я пытаюсь написать простую программу чтения текстовых файлов, создав функцию, которая принимает путь к файлу и преобразует каждую строку текста в массив символов, но это не работает.

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.

— Джеффри Суини

1

@JeffreySweeney да, я тестирую это на локальной машине. Я сохранил текстовый файл в том же месте, что и javascripts и html

— Дэнни

311

Вам нужно проверить статус 0 (так как при локальной загрузке файлов XMLHttpRequestвы не получите статус, потому что он не из 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в адресную строку своего браузера и посмотреть, можете ли вы увидеть файл ..

— Маджид Лаисси

21

это не обязательно должен быть абсолютный путь ... это прекрасно сработало: readTextFile ('Properties / version.txt'); Спасибо!

— Sonic Soul

2

Поскольку мы читаем с веб-сервера, нам нужно установить async на true. Если это был простой localпоиск, тогда установка async в falseпорядке, но onreadystatechangeне нужна, если для нее установлено значение false. Вот документация: w3schools.com/ajax/ajax_xmlhttprequest_send.asp

— рамбосса

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

После введения fetch 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).

Обновление-2 (отказ от ответственности):

Этот метод не работает с Firefox выше версий 68 (Июль 9, 2019) для одной и той же (безопасности) причины , как Chrome: CORS request not HTTP. См. Https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSRequestNotHttp .

— Абделазиз Мохначе
источник

4

Brilliant! Цитируя стандарт Fetch: «обеспечивает согласованную обработку: схем URL, перенаправлений, семантики перекрестного происхождения, CSP, сервисных работников, смешанного контента Referer». Я предполагаю, что это означает прощание с хорошими ol'FileReaders и HttpRequests (и я не буду скучать по ним немного;)

— Armfoot

1

Но как вы можете использовать текст и поместить его в строковую переменную для использования в другом месте? (Я продолжаю получать 'undefined' независимо от того, что я делаю с ним.)

— not2qubit

2

@ not2qubit извлечение текстового файла является асинхронной операцией. Вы получаете неопределенный, потому что вы используете переменную до того, как файл полностью прочитан. Вы должны использовать его внутри обратного вызова обещания или использовать что-то вроде операторов javascript «async await».

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

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 к локальному fs необходимо создать не html-файл с js внутри, а hta-документ.

Файл hta может содержать внутри себя js или vbs.

Но исполняемый файл hta будет работать только на системах Windows.

Это стандартное поведение браузера.

Кроме того, Google Chrome работал на API API, больше информации здесь: http://www.html5rocks.com/en/tutorials/file/filesystem/

— Воробей
источник

это комментарий, который я искал. Все ставят код для пользовательского ввода файла в качестве входного тега, но вопрос заключается в том, чтобы автоматически брать файл по пути, указанному в коде пользователем. Спасибо!

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

13

Если вы уже попробовали, введите «false» следующим образом:

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

— момен
источник

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 человек попробовали это :-))

— Ксан-Кун, Кларк-Дэвис,

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

Современное решение:

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

— Джо
источник

6

Использование Fetch и асинхронной функции

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

Спасибо, у меня работает!

— Оскар Агуайо

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

— Самера Р.
источник

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 по адресу 'file: /// 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>

— adithya
источник

1

Получить данные локального файла в js (data.js) load:

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

Это означает, что chrome создает виртуальный диск для каждого домена для хранения файлов, обслуживаемых доменом по протоколам http / https. Любой доступ к файлам за пределами этого виртуального диска ограничен той же политикой происхождения. AJAX-запросы и ответы происходят по http / https, поэтому не будут работать для локальных файлов.

Firefox не налагает такого ограничения, поэтому ваш код будет успешно работать на Firefox. Однако есть и обходные пути для Chrome: см. Здесь .

— Сушант Т
источник

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, браузер 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 (вы также можете написать попытку try). блок функции 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
источник

Похоже, у вас есть дело о функционале

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

Надеюсь, это поможет.

— Алджон Ямаро
источник