Подтвердить что ты не робот

Поддерживает ли HTML5 взаимодействие с локальными клиентскими файлами из браузера

Я видел несколько сообщений о доступе к файлам на клиентской машине с помощью веб-страницы, а именно question.

Я пытаюсь перейти к парадигме "постоянно обновлять в облаке" для некоторых алгоритмов, которые я пишу, чтобы мои пользователи могли получить доступ к последним версиям, просто обратившись к веб-странице. Это требует, чтобы программа/веб-страница могла начинаться с каталога и рекурсивно проверять файлы внутри него и вычислять результаты на основе найденного. В конце он также должен иметь возможность записать файл результатов в файловую систему клиента.

Один из ответов в предыдущем вопросе упоминает Google Gears, но с тех пор он был отменен в пользу HTML5. Доступен ли доступ к каталогу клиента в HTML5? Как?

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

4b9b3361

Ответ 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 поддерживается не кем иным, как этим парнем прямо здесь:)