Локальный доступ к файлам с помощью JavaScript - PullRequest
155 голосов
/ 16 декабря 2008

Есть ли какие-либо локальные манипуляции с файлами, которые были сделаны с помощью JavaScript? Я ищу решение, которое может быть реализовано без установки, как, например, требующий AIR.

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

Ответы [ 12 ]

157 голосов
/ 14 августа 2011

Просто обновление функций HTML5 http://www.html5rocks.com/en/tutorials/file/dndfiles/ Эта превосходная статья подробно объяснит доступ к локальным файлам в Javascript. Краткое содержание из упомянутой статьи:

В спецификации предусмотрено несколько интерфейсов для доступа к файлам из «локальной» файловой системы :

  1. Файл - отдельный файл; предоставляет информацию только для чтения, такую ​​как имя, размер файла, mimetype и ссылку на дескриптор файла.
  2. FileList - массивоподобная последовательность объектов File. (Подумайте <input type="file" multiple> или перетащите каталог файлов с рабочего стола).
  3. Blob - позволяет разбивать файл на байтовые диапазоны.

- Правка -

См. Комментарий Пола Д. Уэйта ниже

81 голосов
/ 16 декабря 2008

Если пользователь выбирает файл с помощью <input type="file">, вы можете прочитать и обработать этот файл, используя File API .

Чтение или запись произвольных файлов не допускается. Это нарушение песочницы. Из Википедии -> Javascript -> Безопасность :

JavaScript и DOM обеспечивают потенциал для злонамеренных авторов поставлять скрипты для запуска на клиенте компьютер через интернет. Авторы браузера содержать этот риск, используя два ограничения. Во-первых, скрипты запускаются в песочница, в которой они могут выполнять только веб-действия, а не задачи программирования общего назначения, такие как создание файлов .

2016 ОБНОВЛЕНИЕ : прямой доступ к файловой системе возможен через API файловой системы , который поддерживается только в Chrome и Opera * и может закончиться не поддерживается другими браузерами (за исключением Edge ). Подробнее см. Ответ Кевина .

21 голосов
/ 16 декабря 2008

ОБНОВЛЕНИЕ Эта функция удалена начиная с Firefox 17 (см. https://bugzilla.mozilla.org/show_bug.cgi?id=546848).


В Firefox вы (программист) можете сделать это из файла JavaScript:

netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserWrite");

и вам (пользователю браузера) будет предложено разрешить доступ. (для Firefox вам просто нужно делать это один раз при каждом запуске браузера)

Если пользователь браузера - это кто-то другой, он должен дать разрешение.

18 голосов
/ 07 июля 2016

Как упоминалось ранее, API FileSystem и File вместе с API FileWriter могут использоваться для чтения и записи файлов из контекста вкладка / окно браузера на клиентском компьютере.

Есть несколько вещей, относящихся к API-интерфейсам FileSystem и FileWriter, о которых вы должны знать, некоторые из которых были упомянуты, но стоит повторить:

  • Реализации API в настоящее время существуют только в браузерах на основе Chromium (Chrome & Opera)
  • Оба API были сняты со стандартного трека W3C 24 апреля 2014 года и на данный момент являются собственностью
  • Возможность удаления (в настоящее время проприетарных) API-интерфейсов из реализации браузеров в будущем возможна
  • A песочница (место на диске, вне которого файлы не могут оказать никакого эффекта) используется для хранения файлов, созданных с помощью 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-интерфейсов File, 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 больше не соответствуют стандартам, их использование в некоторых случаях может быть оправдано, на мой взгляд, потому что:

  • Возобновление интереса со стороны не реализующих поставщиков браузеров может привести их обратно к этому
  • Высокий уровень проникновения на рынок внедряющих браузеров (на основе Chromium)
  • Google (основной вкладчик в Chromium) не указал API-интерфейсы и дату окончания срока их службы

Однако, должны ли решать "некоторые случаи" ваши собственные.

* BakedGoods поддерживается не кем иным, как этим парнем прямо здесь:)

7 голосов
/ 01 декабря 2014

NW.js позволяет создавать настольные приложения с использованием Javascript без всех ограничений безопасности, обычно устанавливаемых в браузере. Таким образом, вы можете запускать исполняемые файлы с функцией или создавать / редактировать / читать / записывать / удалять файлы. Вы можете получить доступ к аппаратному обеспечению, например, текущему использованию ЦП или общему количеству оперативной памяти и т. Д.

С его помощью вы можете создать настольное приложение для Windows, Linux или Mac, которое не требует установки.

Вот фреймворк для NW.js, Универсальный графический интерфейс:

6 голосов
/ 16 декабря 2008

При развертывании в Windows Windows Script Host предлагает очень полезный JScript API для файловой системы и других локальных ресурсов. Однако включение сценариев WSH в локальное веб-приложение может оказаться не таким элегантным, как хотелось бы.

4 голосов
/ 23 октября 2017

Если у вас есть поле ввода, например

<input type="file" id="file" name="file" onchange="add(event)"/>

Вы можете получить содержимое файла в формате BLOB:

function add(event){
  var userFile = document.getElementById('file');
  userFile.src = URL.createObjectURL(event.target.files[0]);
  var data = userFile.src;
}
3 голосов
/ 08 марта 2014

FSO.js оборачивает новый API-интерфейс файловой системы HTML5, стандартизированный W3C, и предоставляет чрезвычайно простой способ чтения, записи или обхода локальной изолированной файловой системы. Он асинхронный, поэтому файловый ввод-вывод не будет мешать работе пользователя. :)

2 голосов
/ 07 декабря 2013

Если вам нужен доступ ко всей файловой системе на клиенте, чтение / запись файлов, просмотр папок на предмет изменений, запуск приложений, шифрование или подпись документов и т. Д., Пожалуйста, посмотрите на JSFS.

Это обеспечивает безопасный и неограниченный доступ с вашей веб-страницы к компьютерным ресурсам на клиенте без использования технологии плагинов для браузера, такой как AcitveX или Java Applet. Однако необходимо установить и программное обеспечение.

Чтобы работать с JSFS, вы должны обладать базовыми знаниями в области разработки Java и Java EE (Servlets).

Пожалуйста, найдите JSFS здесь: https://github.com/jsfsproject/jsfs. Это бесплатно и под лицензией GPL

1 голос
/ 06 июня 2013

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

Основная идея решения: javascript не может получить доступ к файлу, имея его локальный URL. но он может использовать файл, имея DataURL: поэтому, если пользователь просматривает файл и открывает его, js должен получить «DataURL» непосредственно из HTML вместо «URL».

Затем он превращает DataURL в файл, используя функцию readAsDataURL и объект FileReader. источник и более полное руководство с хорошим примером:

https://developer.mozilla.org/en-US/docs/Web/API/FileReader?redirectlocale=en-US&redirectslug=DOM%2FFileReader

...