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

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

Что здесь не так?

Это все еще не работает после небольшого изменения кода из предыдущей версии, и теперь он дает мне { {X0}} исключение 101.

Я проверил это на Firefox, и он работает, но в Google Chrome он просто не работает и продолжает давать мне исключение 101. Как я могу заставить это работать не только на Firefox, но и на других браузерах (особенно Chrome) ) ?

413
Danny 22 Янв 2013 в 00:14

17 ответов

Лучший ответ

Вам нужно проверить статус 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");
301
Themroc 7 Май 2014 в 01:51

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

<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 работает.

-1
user10865093user10865093 3 Янв 2019 в 23:40

Другой пример - мой читатель с классом 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>
11
websky 19 Фев 2015 в 15:35

Как читать локальный файл?

Используя это, вы загрузите файл с помощью 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');
0
D.Snap 3 Окт 2019 в 13:33
<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
adithya 22 Фев 2018 в 07:41

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

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

Затем с помощью js можно обрабатывать (например, просмотр) файл или список файлов, некоторые их свойства и содержимое файла или файлов.

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

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

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

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

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

Кроме того, Google Chrome работал на API-интерфейсе fs, больше информации здесь: http://www.html5rocks.com/en/ учебники / файл / файловая система /

16
Sparrow 29 Янв 2016 в 03:47

Получить данные локального файла в 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: //.

1
Lo Vega 26 Апр 2019 в 05:20

Локальные вызовы AJAX в Chrome не поддерживаются из-за политики того же источника.

Если вы проверите журналы консоли, вы найдете "Cross origin requests are not supported for protocol schemes: http, data, chrome, chrome-extension, https."

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

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

1
Sushant T 4 Апр 2019 в 07:06

Добавив к некоторым ответам выше, это модифицированное решение работало для меня.

<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
Fabii 31 Дек 2018 в 19:50
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>
37
Poornachander K 22 Авг 2017 в 10:46

Я знаю, я опаздываю на эту вечеринку. Позвольте мне показать вам, что у меня есть.

Это простое чтение текстового файла .

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

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

0
Aljohn Yamaro 17 Мар 2020 в 06:56
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:
введите описание изображения здесь

2
nadir hamidou 18 Янв 2019 в 09:38

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

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

logFileText('file.txt')
5
barro32 18 Мар 2020 в 11:19

Попробуйте создать две функции:

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]);
}
12
Bill Bell 2 Окт 2016 в 17:18

Чтобы прочитать текст локального файла через 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
Ali Ezzat Odeh 7 Янв 2019 в 09:56

После введения получения 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 , но похоже, что реализация fetch Chrome не поддерживает file:/// схему URL на дату написания этой статьи. обновление (проверено в Chrome 68).

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

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

93
OlivierM 22 Фев 2020 в 13:13

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

 rawFile.open("GET", file, false);
13
A-Sharabiani 29 Янв 2018 в 16:23