Доступ к локальным файлам с помощью javascript

просто обновление функций HTML5http://www.html5rocks.com/en/tutorials/file/dndfiles/ Эта отличная статья подробно объяснит локальный доступ к файлам в Javascript. Резюме из упомянутой статьи:

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

1. файл-отдельный файл; предоставляет только для чтения информацию, такую как имя, размер файла, тип файла и ссылку на дескриптор файла.
2. FileList-массивная последовательность файловых объектов. (Подумай!--0--> или перетаскивание каталога файлов с рабочего стола).
3. Blob-позволяет нарезать файл на байтовые диапазоны.

-- Edit --

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

обновление эта функция удаляется с Firefox 17 (см. https://bugzilla.mozilla.org/show_bug.cgi?id=546848).

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

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

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

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

как уже упоминалось ранее,файловой системы и APIs, вместе с FileWriter API, может использоваться для чтения и записи файлов из контекста вкладки/окна браузера на клиентскую машину.

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

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

файл пишем:

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 FileWriter больше не находятся на пути стандартов, их использование может быть оправдано в некоторых случаях, на мой взгляд, потому что:

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

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

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

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

вы можете создать с ним настольное приложение windows, linux или mac, которое не требует установка.

• http://nwjs.io

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

• http://ugui.io

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

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

Если у вас есть поле ввода типа

<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;
}

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

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

для работы с JSFS у вас должен быть базовый знание в Java и Java EE разработка (сервлеты).

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

предполагая, что любой файл, который может понадобиться 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

Если вы используете angularjs & aspnet/mvc для получения файлов json, вы необходимо разрешить тип mime в web config

<staticContent>
    <remove fileExtension=".json" />
    <mimeMap fileExtension=".json" mimeType="application/json" />
  </staticContent>