Доступ до локального файлу за допомогою JavaScript


177

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

Зокрема, я хотів би прочитати вміст з файлу і записати його в інший файл. На даний момент я не переживаю за отримання дозволів і просто припускаю, що вже маю повні дозволи на ці файли.


Відповіді:


87

Якщо користувач вибирає файл через <input type="file">, ви можете прочитати та обробити цей файл за допомогою API файлу .

Читання або запис довільних файлів дизайном заборонено. Це порушення пісочниці. З Вікіпедії -> Javascript -> Безпека :

JavaScript і DOM надають потенційним зловмисникам можливість доставляти сценарії для роботи на клієнтському комп'ютері через Інтернет. Автори браузерів містять цей ризик, використовуючи два обмеження. По-перше, скрипти виконуються в пісочниці, в якій вони можуть виконувати тільки пов’язані з Інтернетом дії, а не завдання програмування загального призначення, такі як створення файлів .

ОНОВЛЕННЯ 2016 року : Доступ до файлової системи безпосередньо можливий через API Filesystem , який підтримується лише Chrome і Opera, і, в кінцевому підсумку, не може бути реалізований іншими браузерами (за винятком Edge ). Детальніше дивіться у відповідь Кевіна .


28
Блін. Це дурно, звичайно. Javascript - це нібито мова застосунку-агностичного сценарію. Не кожна програма - це веб-браузер. Я прийшов сюди, бо мені цікаво, наприклад, писати Photoshop. Навіть якщо деякі програми не пропонують класи доступу до файлів, має сенс стандартизувати їх для тих додатків, де вони доречні - стандартна, але додаткова функція, тому досвід роботи однієї програми передається навіть якщо не застосовується загально. Те, що я дізнаюсь у Photoshop, не буде переносним навіть для інших хостів Javascript, які дозволяють отримати доступ до файлів.
Steve314

27
Javascript мовою і робити все, що хостинг середовище дозволяє це робити. SpiderMonkey може робити все, що може зробити будь-яка інша мова. Javascript у браузері знаходиться в пісочному режимі.

35
Ця відповідь могла бути правильною 3 роки тому, але вже точно не є правильною. Дивіться відповідь @Horst Walter на HTML5. Або йдіть сюди: html5rocks.com/en/tutorials/file/dndfiles
james.garriss

@ james.garriss Так, насправді це було не дуже коректно три роки тому. Ця сторінка навчила мене , як читання / запис з Firefox в 2003 web.archive.org/web/20031229011919/http: //www.captain.at / ... (Bulit для XUL , але доступні в браузері з XPCOM) і Microsoft було node.js-стиль сценарію оболонки javscript в 1990-х (і FileIO доступний у браузері з ActiveX)
original_username

Більше неможливо
SysDragon

158

Просто оновлення функцій HTML5 знаходиться в http://www.html5rocks.com/en/tutorials/file/dndfiles/ . Ця чудова стаття детально пояснить локальний доступ до файлів у JavaScript. Короткий зміст із зазначеної статті:

У специфікації передбачено кілька інтерфейсів для доступу до файлів із "локальної" файлової системи :

  1. Файл - індивідуальний файл; надає лише інформацію для читання, таку як ім'я, розмір файлу, тип MIME та посилання на обробку файлу.
  2. FileList - послідовність файлових об’єктів, схожа на масив. (Подумайте <input type="file" multiple>або перетягніть каталог файлів з робочого столу).
  3. Blob - Дозволяє нарізати файл у байтові діапазони.

Дивіться коментар Пола Д. Уейта нижче.


7
Це не зовсім справжня файлова система, як у нас, використовуючи плагін Java або Flash. Наприклад, ми не можемо перерахувати файли на робочому столі користувача, якщо він спочатку не вибере їх сам.
Pacerier


4
Будьте обережні, враховуючи форму W3C для вилучення корисної технології. Файлова система api, реалізована лише в хромі, не йде вперед. Файл апі, має універсальну підтримку, приймаються в якості w3c робочого проекту , і ми більше не можемо уявити собі життя без нього. Звичайно, ми все ще перебуваємо в браузері, і нам потрібно чекати, поки користувач не принесе нам файл, але це різко розширює сферу охоплення веб-додатків і не скоро йде.
bbsimonbb

21

ОНОВЛЕННЯ Ця функція видаляється з Firefox 17 (див. Https://bugzilla.mozilla.org/show_bug.cgi?id=546848 ).


На Firefox ви (програміст) можете це зробити з файлу JavaScript:

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

і вам (користувачу браузера) буде запропоновано дозволити доступ. (для Firefox це потрібно робити щоразу під час запуску браузера)

Якщо користувачем браузера є хтось інший, він повинен надати дозвіл.


6
Це дає помилку, що вона застаріла, і ви можете це робити лише в розширенні, а не на веб-сайті javascript
Esailija

4
як показує це посилання, ця функція була видалена в пізніших версіях Firefox. support.mozilla.org/en-US/questions/944433
Makan Tayebi

3
о, це смокче. Я отримую безпеку і все таке, але нам потрібен спосіб надання довіри для локального запуску власних файлів javascript.
Jason S

впевнений. і я ще не знайшов іншого способу зробити це.
Makan Tayebi

2
Оновіть відповідь, щоб показати, що вона застаріла. Дякую.
jpaugh

20

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

Існує кілька речей, що стосуються API FileSystem та FileWriter, про які слід пам’ятати, деякі з яких були згадані, але які варто повторити:

  • Зараз реалізація API існує лише у веб-переглядачах Chromium (Chrome & Opera)
  • Обидва API були вилучені з треку стандартів W3C 24 квітня 2014 року, і на сьогоднішній день є власником
  • В майбутньому можливе видалення (зараз фірмових) API з веб-переглядачів
  • Для зберігання файлів, створених за допомогою API, використовується пісочниця (розташування на диску, поза яким файли не дають ефекту)
  • Віртуальна файлова система (структура каталогів , яка не обов'язково існує на диску в тій же формі , що робить , коли доступ з браузера) використовується представляють файли , створені з допомогою API -

Ось прості приклади того, як API, прямо та опосередковано, використовуються в тандемі для таких дій:

Запечені продукти *

Написати файл:

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 вже не знаходяться на етапі стандартів, на мою думку, їх використання може бути виправданим у деяких випадках, оскільки:

  • Поновлений інтерес з боку постачальників веб-переглядачів, що не реалізуються, може повернути їх на себе
  • Проникнення на ринок веб-переглядачів (на основі хрому) є високим
  • Google (головний учасник Chromium) не вказав API та термін його закінчення

Однак, чи "деякі випадки" охоплюють ваш власний, вирішувати вам.

* BakedGoods тут підтримує не хто інший, як цей хлопець :)


7

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

За допомогою нього можна створити настільний додаток Windows, Linux або mac, який не потребує установки.

Ось рамка для NW.js, Universal GUI:


1
Також можливий доступ до локальних файлів за допомогою Electron , що є подібною основою для настільних додатків JavaScript.
Андерсон Грін

6

Якщо ви розгортаєтесь у Windows, хост сценарію Windows пропонує дуже корисний API JScript для файлової системи та інших локальних ресурсів. Однак інтеграція WSH-скриптів у локальну веб-програму може бути не такою елегантною, як ви хочете.


3
Я хотів би, щоб рішення було незалежним від ОС (принаймні між Windows та Mac), тому хост скрипту Windows не задовольняє його, якщо не існує порівнянного рішення для платформи mac
Джаред

5

Якщо у вас є поле введення, як

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

4

FSO.js обгортає новий API FileSystem HTML5, який стандартизований W3C і забезпечує надзвичайно простий спосіб для читання, запису або переходу до локальної файлової системи з пісочним файлом. Це асинхронно, тому введення / виведення файлів не заважатиме користувачеві. :)


1
На даний момент FSO.js не підтримуються IE, Mozilla або Safari.
Філіп Сенн

2

Якщо вам потрібен доступ до всієї файлової системи на клієнті, читання / запис файлів, перегляд папок для змін, запуск програм, шифрування або підписання документів тощо, будь ласка, подивіться на JSFS.

Це дозволяє забезпечити безпечний та необмежений доступ з вашої веб-сторінки до комп'ютерних ресурсів клієнта без використання такої технології плагінів браузера, як AcitveX або Java Applet. Однак також потрібно встановити мир програмного забезпечення.

Для роботи з JSFS ви повинні мати базові знання з розробки Java та Java EE (сервлетів).

Знайдіть JSFS тут: https://github.com/jsfsproject/jsfs . Це безкоштовно та ліцензовано під GPL


1

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

Основна ідея рішення полягає в тому, що код JavaScript не може отримати доступ до файлу, маючи свою локальну URL-адресу. Але він може використовувати файл, маючи свій DataURL: тому якщо користувач переглядає файл і відкриває його, JavaScript повинен отримати "DataURL" безпосередньо з HTML, а не отримувати "URL".

Потім він перетворює DataURL у файл, використовуючи функцію readAsDataURL та об'єкт FileReader. Джерело та більш повний посібник із хорошим прикладом наведено у:

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


0

Існує (комерційний) продукт "localFS", який можна використовувати для читання та запису всієї файлової системи на клієнтському комп'ютері.

Потрібно встановити невелику програму Windows і на вашу сторінку включити крихітний .js файл.

В якості функції захисту доступ до файлової системи може бути обмежений однією папкою та захищений секретним ключем.

https://www.fathsoft.com/localfs


-4

якщо ви використовуєте angularjs & aspnet / mvc, щоб отримати файли json, ви повинні дозволити тип mime у веб-конфігурації

<staticContent>
    <remove fileExtension=".json" />
    <mimeMap fileExtension=".json" mimeType="application/json" />
  </staticContent>
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.