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

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

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

Ответы

Ответ 1

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

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

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

2016 UPDATE. Доступ к файловой системе напрямую возможен через API файловой системы, который поддерживается только Chrome и Opera и может не реализоваться другими браузерами ( с исключение Edge). Подробнее см. ответ Кевина.

Ответ 2

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

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

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

- Изменить -

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

Ответ 3

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

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

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

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

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

Ответ 4

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

Существует несколько вещей, относящихся к https://stackoverflow.com/API-интерфейсам FileSystem и FileWriter, о которых вам следует знать, некоторые из которых были упомянуты, но стоит повторить:

Реализации https://stackoverflow.com/API-интерфейсов в настоящее время существуют только в браузерах на основе хрома (Chrome и Opera)
Оба https://stackoverflow.com/API были сняты со стандартного трека W3C 24 апреля 2014 года и на данный момент являются собственностью
Удаление (теперь запатентованных) https://stackoverflow.com/API-интерфейсов от реализации браузеров в будущем - это возможность
песочница (расположение на диске, за пределами которого файлы не могут произвести никакого эффекта) используется для хранения файлов, созданных с помощью https://stackoverflow.com/API
Используется виртуальная файловая система (структура каталогов, которая необязательно существует на диске в той же форме, что и при доступе из браузера) представляет файлы, созданные с помощью https://stackoverflow.com/API

Вот простые примеры того, как https://stackoverflow.com/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){}
});

Использование необработанных файлов, https://stackoverflow.com/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);

Хотя https://stackoverflow.com/API-интерфейсы FileSystem и FileWriter больше не соответствуют стандартным трекам, их использование может быть оправдано в некоторых случаях, на мой взгляд, потому что:

Возобновленный интерес у недействующих поставщиков браузеров может вернуть их обратно.
Проникновение на рынок реализующих (на основе хромовых) браузеров является высоким.
Google (основной вклад в Chromium) не дал и не закончил https://stackoverflow.com/API https://stackoverflow.com/API

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

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

Ответ 5

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

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

http://nwjs.io

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

http://ugui.io

Ответ 6

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

Ответ 7

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

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

Ответ 8

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

Ответ 9

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

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

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

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

Ответ 10

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

Ответ 11

Существует (коммерческий) продукт, localFS, который можно использовать для чтения и записи всей файловой системы на клиентском компьютере.

Небольшое приложение для Windows должно быть установлено, а крошечный файл .js должен быть на вашей странице.

В качестве функции безопасности доступ к файловой системе может быть ограничен одной папкой и защищен секретным ключом.

https://www.fathsoft.com/localfs

Ответ 12

если вы используете angularjs и aspnet/mvc, чтобы получить json файлы, вы должны разрешить тип mime в веб-конфигурации

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