Как прочитать текстовый файл с сервера, используя JavaScript? - PullRequest
Новая
       18

Как прочитать текстовый файл с сервера, используя JavaScript?

34 голосов
/ 26 декабря 2010

На сервере есть текстовый файл. Используя JavaScript на клиенте, я хочу иметь возможность прочитать этот файл и обработать его. Формат файла на сервере не может быть изменен.

Как я могу получить содержимое файла в переменные JavaScript, чтобы я мог выполнить эту обработку? Размер файла может быть до 3,5 МБ, но его можно легко обработать, скажем, по 100 строк (1 строка - 50–100 символов).

Ни одно из содержимого файла не должно быть видно пользователю; он увидит результаты обработки данных в файле.

Ответы [ 7 ]

32 голосов
/ 26 декабря 2010

Вы можете использовать скрытый фрейм, загрузить туда файл и проанализировать его содержимое.

HTML: 

<iframe id="frmFile" src="test.txt" onload="LoadFile();" style="display: none;"></iframe>

JavaScript: 

<script type="text/javascript">
function LoadFile() {
    var oFrame = document.getElementById("frmFile");
    var strRawContents = oFrame.contentWindow.document.body.childNodes[0].innerHTML;
    while (strRawContents.indexOf("\r") >= 0)
        strRawContents = strRawContents.replace("\r", "");
    var arrLines = strRawContents.split("\n");
    alert("File " + oFrame.src + " has " + arrLines.length + " lines");
    for (var i = 0; i < arrLines.length; i++) {
        var curLine = arrLines[i];
        alert("Line #" + (i + 1) + " is: '" + curLine + "'");
    }
}
</script>

Примечание: вЧтобы это работало в браузере Chrome, вы должны запустить его с флагом - allow-file-access-from-files . кредит .

13 голосов
/ 26 декабря 2010

Загрузка этого гигантского сгустка данных - не лучший план, но если вам нужно, вот схема того, как вы могли бы это сделать, используя jQuery $.ajax(). 

<html><head>
<script src="jquery.js"></script>
<script>
getTxt = function (){

  $.ajax({
    url:'text.txt',
    success: function (data){
      //parse your data here
      //you can split into lines using data.split('\n') 
      //an use regex functions to effectively parse it
    }
  });
}
</script>
</head><body>
  <button type="button" id="btnGetTxt" onclick="getTxt()">Get Text</button>
</body></html>
10 голосов
/ 26 декабря 2010

Вам необходимо использовать Ajax, который в основном отправляет запрос на сервер, а затем получает объект JSON, который вы преобразуете в объект JavaScript.

Проверьте это:

http://www.w3schools.com/ajax/tryit.asp?filename=tryajax_first

Если вы используете библиотеку jQuery, это может быть еще проще:

http://api.jquery.com/jQuery.ajax/

Сказав это, я настоятельно рекомендую вам не загружать файл размером 3,5 МБ в JS! Это не очень хорошая идея. Выполните обработку на вашем сервере, затем верните данные после обработки. Затем, если вы хотите получить новые данные, отправьте новый Ajax-запрос, обработайте запрос на сервере и верните новые данные.

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

9 голосов
/ 12 сентября 2014

Я использовал предложение Рафида об использовании AJAX.

Это сработало для меня: 

var url = "http://www.example.com/file.json";

var jsonFile = new XMLHttpRequest();
    jsonFile.open("GET",url,true);
    jsonFile.send();

    jsonFile.onreadystatechange = function() {
        if (jsonFile.readyState== 4 && jsonFile.status == 200) {
            document.getElementById("id-of-element").innerHTML = jsonFile.responseText;
        }
     }

Я в основном (почти буквально) скопировал этот код из http://www.w3schools.com/ajax/tryit.asp?filename=tryajax_get2, так что заслугаих для всего.

Я не очень хорошо знаю, как это работает, но вам не нужно знать, как работают ваши тормоза, чтобы использовать их;)

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

0 голосов
/ 30 ноября 2018

Похоже, XMLHttpRequest был заменен Fetch API .Google опубликовал хорошее введение , которое включает в себя этот пример, делающий то, что вы хотите: 

fetch('./api/some.json')
  .then(
    function(response) {
      if (response.status !== 200) {
        console.log('Looks like there was a problem. Status Code: ' +
          response.status);
        return;
      }

      // Examine the text in the response
      response.json().then(function(data) {
        console.log(data);
      });
    }
  )
  .catch(function(err) {
    console.log('Fetch Error :-S', err);
  });

Однако вы, вероятно, хотите позвонить response.text() вместо response.json().

0 голосов
/ 18 октября 2017

Вам необходимо проверить статус 0 (например, при локальной загрузке файлов с помощью XMLHttpRequest вы не получаете статус, а если он от веб-сервера, он возвращает статус) 

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

}

Для чтения файла устройства используйте это:

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

Для чтения файла изиспользование сервера:

readTextFile ("http://test/file.txt");

0 голосов
/ 26 декабря 2010

Я действительно думаю, что вы делаете это неправильно.Попытка загрузить и разобрать текстовый файл + 3Mb - полное безумие.Почему бы не проанализировать файл на стороне сервера, сохранив результаты в виде ORM в базе данных (по вашему выбору, SQL хорош, но это также зависит от того, что данные ключ-значение контента работают лучше на чем-то вроде CouchDB), а затем используйте ajax для анализа данныхна стороне клиента.

Плюс, еще лучшая идея - полностью пропустить текстовый файл для еще большей производительности, если это вообще возможно.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...