Поддерживает ли HTML5 взаимодействие с локальными клиентскими файлами из браузера
Я видел несколько сообщений о доступе к файлам на клиентской машине с помощью веб-страницы, а именно question.
Я пытаюсь перейти к парадигме "постоянно обновлять в облаке" для некоторых алгоритмов, которые я пишу, чтобы мои пользователи могли получить доступ к последним версиям, просто обратившись к веб-странице. Это требует, чтобы программа/веб-страница могла начинаться с каталога и рекурсивно проверять файлы внутри него и вычислять результаты на основе найденного. В конце он также должен иметь возможность записать файл результатов в файловую систему клиента.
Один из ответов в предыдущем вопросе упоминает Google Gears, но с тех пор он был отменен в пользу HTML5.
Доступен ли доступ к каталогу клиента в HTML5? Как?
Я знаю, почему доступ на любой веб-странице к локальным файлам является угрозой безопасности, но для моей цели я не имею никаких проблем с запросом у пользователя соответствующих разрешений.
Ответы
Ответ 1
Нет, не по крайней мере. Однако здесь у вас есть несколько вариантов.
В настоящее время ваш лучший выбор:
- Перетащите файлы с рабочего стола, см. учебник.
- Использовать файл типа ввода.
- Прочитайте содержимое с помощью API файлов или отправьте форму. Подробнее о Центр разработчиков Mozilla о динамическом прочтении файла.
- Вы можете указать атрибут
multiple
для чтения и открытия нескольких файлов одновременно без необходимости иметь отдельные поля.
- У вас может быть невидимый ввод и "вызвать клик" на нем, чтобы открыть диалог открытия файла. Подробнее см. Предыдущую ссылку Центра разработчика Mozilla.
- Используйте FileSystem API, который позволяет создавать, удалять, читать, изменять файлы в файловой системе. Примечание. У вас есть изолированный каталог, с которым вы работаете, вы не можете получить доступ ко всей системе именно так.
- Используйте Java с подписанными апплетами для доступа к всей файловой системе. Для этого требуется, чтобы пользователь принял подпись.
Ответ 2
Chrome 6 также поддерживает API файлов
Ответ 3
Как уже упоминалось, FileSystem и File API, а также API FileWriter, могут использоваться для чтения и записи файлов из контекста вкладки/окна браузера на клиентскую машину.
Существует несколько вещей, относящихся к API-интерфейсам FileSystem и FileWriter, о которых вам следует знать, некоторые из которых были упомянуты, но стоит повторить:
- Реализации API-интерфейсов в настоящее время существуют только в браузерах на основе хрома (Chrome и Opera)
- Оба API были сняты со стандартного трека W3C 24 апреля 2014 года и на данный момент являются собственностью
- Удаление (теперь запатентованных) API-интерфейсов от реализации браузеров в будущем - это возможность
- песочница (расположение на диске, за пределами которого файлы не могут произвести никакого эффекта) используется для хранения файлов, созданных с помощью API
- Используется виртуальная файловая система (структура каталогов, которая необязательно существует на диске в той же форме, что и при доступе из браузера) представляет файлы, созданные с помощью API
Вот простые примеры того, как API используются, прямо или косвенно, в тандеме, чтобы делать такие вещи:
BakedGoods *
Записать файл:
bakedGoods.set({
data: [{key: "testFile", value: "Hello world!", dataFormat: "text/plain"}],
storageTypes: ["fileSystem"],
options: {fileSystem:{storageType: Window.PERSISTENT}},
complete: function(byStorageTypeStoredItemRangeDataObj, byStorageTypeErrorObj){}
});
Считать файл:
bakedGoods.get({
data: ["testFile"],
storageTypes: ["fileSystem"],
options: {fileSystem:{storageType: Window.PERSISTENT}},
complete: function(resultDataObj, byStorageTypeErrorObj){}
});
Использование необработанных файлов, API FileWriter и FileSystem
Записать файл:
function onQuotaRequestSuccess(grantedQuota)
{
function saveFile(directoryEntry)
{
function createFileWriter(fileEntry)
{
function write(fileWriter)
{
var dataBlob = new Blob(["Hello world!"], {type: "text/plain"});
fileWriter.write(dataBlob);
}
fileEntry.createWriter(write);
}
directoryEntry.getFile(
"testFile",
{create: true, exclusive: true},
createFileWriter
);
}
requestFileSystem(Window.PERSISTENT, grantedQuota, saveFile);
}
var desiredQuota = 1024 * 1024 * 1024;
var quotaManagementObj = navigator.webkitPersistentStorage;
quotaManagementObj.requestQuota(desiredQuota, onQuotaRequestSuccess);
Считать файл:
function onQuotaRequestSuccess(grantedQuota)
{
function getfile(directoryEntry)
{
function readFile(fileEntry)
{
function read(file)
{
var fileReader = new FileReader();
fileReader.onload = function(){var fileData = fileReader.result};
fileReader.readAsText(file);
}
fileEntry.file(read);
}
directoryEntry.getFile(
"testFile",
{create: false},
readFile
);
}
requestFileSystem(Window.PERSISTENT, grantedQuota, getFile);
}
var desiredQuota = 1024 * 1024 * 1024;
var quotaManagementObj = navigator.webkitPersistentStorage;
quotaManagementObj.requestQuota(desiredQuota, onQuotaRequestSuccess);
Учитывая текущие состояния API-интерфейсов FileSystem и FileWriter, их использование для чтения и записи файлов в настоящее время не является "способом HTML5" для выполнения этих действий.
Возобновленный интерес к API-интерфейсам от недействующих поставщиков браузеров может поместить их обратно на стандартную дорожку. Это в сочетании с высоким проникновением на рынок браузеров на основе хрома и тем фактом, что Google (основной вклад в Chromium) не дал, и дата окончания срока службы API-интерфейсов должна быть достаточной для того, чтобы оправдать их использование в некоторых случаях.
* BakedGoods поддерживается не кем иным, как этим парнем прямо здесь:)