Использование локального файла в качестве источника данных в JavaScript

Фон:

Я хочу сделатьприложение" который использует JavaScript / HTMLтолько и может быть открыт браузером прямо из файловой системы. Это приложениедолжен быть в состоянии прочитать данные из другого файла. Я'Затем я буду использовать JS для его анализа и рендеринга страниц. В качестве упрощенного примера представьте, что у меня есть файл CSV(Скачать здесь):

Mark Rodgers,[email protected],Accounting
[...]
Melissa Jones,[email protected],CEO

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

Что я'мы достигли к настоящему времени:

демонстрация (щелкните правой кнопкой мыши -> "Сохранить как" сохранить HTML на свой компьютер). Это'также доступны наjsfiddle полуразбитым способом (разметка нарушена, но она все равно должна быть функционально правильной).

Просто перетащите текстовый файл CSV в поле перетаскивания или выберите текстовый файл с помощью меню «Файл», и JavaScript прочитает, проанализирует файл и заполнит таблицу.

Это зависит от FileReader API; большая часть тяжелой работы выполняется этой функцией:

function handleFileSelect(evt) {
    evt.stopPropagation();
    evt.preventDefault();

    var files = evt.target.files || evt.dataTransfer.files; // FileList object.
    var file = files[0];

    // this creates the FileReader and reads stuff as text
    var fr = new FileReader();
    fr.onload = parse;
    fr.readAsText(file);

    // this is the function that actually parses the file
    // and populates the table
    function parse()
    {
        var table = document.getElementById('emps');
        var employees = fr.result.split('\n'); var c = 0;
        for (var i in employees)
        {
            var employee = employees[i].split(',');
            if (employee.length == 3)
            {
                var row = document.createElement('tr');
                row.innerHTML = "" + employee.join("") + "";
                table.appendChild(row);
                c++;
            }
        }
        document.getElementById('result').innerHTML = '<span>Added ' + c + ' employees from file: ' + file.name + '</span>';
    }
}

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

Требования к решению:

Должен работать в автономном режиме; то есть: это можетне полагайтесь на любой онлайн-сервис. Сюда также входят HTTP-серверы, работающие на локальном компьютере. Идея состоит в том, чтобы запустить его на любом компьютере с установленным браузером.

Должен работать, когда страница открывается с помощьюfile:/// протокол (т.е. HTML-страница на жестком диске).

Долженне полагаться на сторонние надстройки (например, Flash, Java,содрогается ActiveX). Я'Я уверен, что это, вероятно, неработать в любом случае, если страница находится вfile:///

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

Если он работает на Firefox или Chrome (в идеале на обоих)хорошо. Это'также можно полагаться на экспериментальные API

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

Так что еслиэто умный взлом, чтобы загрузить файл на страницу, которая 'тоже хорошо (возможно, загрузите его в невидимый iframe и попросите JS извлечь его содержимое); тот'тоже хорошо

Ответы на вопрос(6)

Ваш ответ на вопрос