Использование локального файла в качестве источника данных в 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 = "<td>" + employee.join("</td><td>") + "</td>";
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 извлечь содержимое); тоже норм.