JQuery: чтение текстового файла из файловой системы - PullRequest
Новая
       6

JQuery: чтение текстового файла из файловой системы

15 голосов
/ 10 декабря 2010

Я пытаюсь прочитать текстовый файл, используя jquery, например: 

// LOAD file and split line by line and append divs
$.get('myFile.txt', function(data) {    
    var lines = data.split("\n");

    $.each(lines, function(n, elem) {
       $('#myContainer').append('<div>' + elem + '</div>');
    });
});

В Chrome я получаю: 

XMLHttpRequest cannot load file:///C:/myPath/myFile.txt. Origin null is not allowed by Access-Control-Allow-Origin.

Firefox не показывает ошибки, но кодне выполняется (у меня есть точки останова в firebug и анонимная функция никогда не запускается).

Любая помощь приветствуется!

РЕДАКТИРОВАТЬ :

пришлось:

  • использовать полный путь к файлу
  • запустить Chrome с "--allow-file-access-from-files"

теперь все работает нормально!

Ответы [ 8 ]

15 голосов
/ 10 декабря 2010

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

РЕДАКТИРОВАТЬ: Глядя на этот поток , вы можете запустить Chrome, используя параметр --allow-file-access-from-files, который разрешит доступ к локальным файлам.

5 голосов
/ 09 июля 2013

Это нормально работает в Firefox, по крайней мере.

Проблема, с которой я столкнулся, заключается в том, что я получил объект XML вместо простой текстовой строки. Чтение xml-файла с моего локального диска работает нормально (тот же каталог, что и в html), поэтому я не понимаю, почему чтение текстового файла было бы проблемой.

Я понял, что мне нужно сказать jquery передать строку вместо объекта XML. Что я и сделал, и это наконец-то сработало: 

function readFiles()
{
    $.get('file.txt', function(data) {
        alert(data);
    }, "text");
}

Обратите внимание на добавление «текста» в конце. Это говорит jquery передавать содержимое файла file.txt в виде строки вместо объекта XML. В окне предупреждения будет показано содержимое текстового файла. Если вы удалите «текст» в конце, в окне предупреждения появится «Объект XML».

5 голосов
/ 10 декабря 2010

укажите полный путь к файлу URL

3 голосов
/ 07 мая 2015

В качестве обходного пути для этого я использовал данные в виде файла js, который реализует функцию, возвращающую необработанные данные в виде строки:

html: 

<!DOCTYPE html>
<html>

<head>
  <script src="script.js"></script>
  <script type="text/javascript">
    function loadData() {
      // getData() will return the string of data...
      document.getElementById('data').innerHTML = getData().replace('\n', '<br>');
    }
  </script>
</head>

<body onload='loadData()'>
  <h1>check out the data!</h1>
  <div id='data'></div>
</body>

</html>

скрипт.js: 

// function wrapper, just return the string of data (csv etc)
function getData () {
    return 'look at this line of data\n\
oh, look at this line'
}

Смотрите это в действии здесь - http://plnkr.co/edit/EllyY7nsEjhLMIZ4clyv?p=preview Недостатком является то, что вам необходимо выполнить некоторую предварительную обработку файла для поддержки мультистрок (добавьте каждую строку в строке с помощью '\n\').

3 голосов
/ 10 декабря 2010

это работает 

        $.get('1.txt', function(data) {
            //var fileDom = $(data);

            var lines = data.split("\n");

            $.each(lines, function(n, elem) {
                $('#myContainer').append('<div>' + elem + '</div>');
            });
        });
2 голосов
/ 02 мая 2013

Это не работает и не должно, потому что это будет гигантская дыра в безопасности.

Взгляните на новый API файловой системы .Это позволяет запрашивать доступ к виртуальной изолированной файловой системе, управляемой браузером.Вам нужно будет попросить пользователя «загрузить» его файл в изолированную файловую систему один раз, но после этого вы сможете работать с ним очень элегантно.

Хотя это определенно будущее, оно все еще в высшей степени экспериментально и работает тольков Google Chrome насколько известно CanIUse .

1 голос
/ 10 января 2011

Пока файл не нужно динамически генерировать, например, простой текстовый или HTML-файл, вы можете проверить его локально БЕЗ веб-сервера - просто используйте относительный путь.

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

Вы не можете сделать это без веб-сервера !!! Chrome отправляет XMLHttpRequest в систему, которая выглядит примерно так 

GET /myFile.txt HTTP/1.1

И операционная система не прослушивает порт 80, чтобы получить это! И даже если это так, он должен реализовать протокол HTTP для связи с браузером ...

Чтобы это работало, в вашей системе должен быть установлен WEB-сервер, который будет прослушивать порт 80 и делать ваши файлы доступными через HTTP-соединение, что делает ваш код работоспособным.

...