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

Я пытаюсь прочитать текстовый файл с помощью 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>');
    });
});

В хром я получаю:

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

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

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

ИЗМЕНИТЬ

пришлось:

  • используйте полный путь к файлу
  • запуск хром с "--allow-доступ к файлам, из файлов"

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

ОТВЕТЫ

Ответ 1

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

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

Ответ 2

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

Ответ 3

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

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

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

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

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

Ответ 4

этот работает

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

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

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

Ответ 5

Обходной путь для этого я использовал для включения данных в виде 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>

script.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\').

Ответ 6

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

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

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

Ответ 7

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

Ответ 8

Если вы включите поле ввода файла, вы можете получить доступ к файлу в виде строки в кодировке base64 с помощью объекта FileReader. Если это текстовый файл, то для получения текста будет работать простое декодирование base64.

Предполагая следующий HTML:

<input type="file" id="myfile" />

Вы можете получить доступ, используя следующий JQuery JS:

var file = $('#myfile').get(0).files[0];
var reader = new FileReader();
reader.onload = function (e) {
    //get the file result, split by comma to remove the prefix, then base64 decode the contents
    var decodedText = atob(e.target.result.split(',')[1]);
    //show the file contents
    alert(decoded);
};
reader.readAsDataURL(file);

Ответ 9

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

GET /myFile.txt HTTP/1.1

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

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