Lokalny dostęp do plików za pomocą JavaScript

Czy istnieje manipulacja lokalnymi plikami, która została wykonana za pomocą JavaScript? Szukam rozwiązania, które można osiągnąć bez śladu instalacji, jak wymaganie Adobe AIR .

W szczególności chciałbym przeczytać zawartość pliku i zapisać tę zawartość w innym pliku. W tym momencie nie martwię się o uzyskanie uprawnień i po prostu zakładam, że mam już pełne uprawnienia do tych plików.

Jeśli użytkownik wybierze plik przez <input type="file">, możesz odczytać i przetworzyć ten plik za pomocą interfejsu File API .

Czytanie lub zapisywanie dowolnych plików jest niedozwolone z założenia. To naruszenie piaskownicy. Z Wikipedii -> Javascript -> Bezpieczeństwo :

JavaScript i DOM umożliwiają złośliwym autorom dostarczanie skryptów do uruchomienia na komputerze klienckim za pośrednictwem sieci WWW. Autorzy przeglądarek ponoszą to ryzyko stosując dwa ograniczenia. Po pierwsze, skrypty działają w piaskownicy, w której mogą wykonywać tylko działania związane z siecią, a nie zadania programistyczne ogólnego przeznaczenia, takie jak tworzenie plików .

AKTUALIZACJA 2016 : Bezpośredni dostęp do systemu plików jest możliwy za pośrednictwem API systemu plików , które jest obsługiwane tylko przez Chrome i Operę i może nie być implementowane przez inne przeglądarki (z wyjątkiem Edge ). Aby uzyskać szczegółowe informacje, zobacz odpowiedź Kevina .

Jest tylko aktualizacja funkcji HTML5 adresem http://www.html5rocks.com/en/tutorials/file/dndfiles/ . Ten wspaniały artykuł szczegółowo wyjaśnia dostęp do plików lokalnych w JavaScript. Podsumowanie wspomnianego artykułu:

Specyfikacja zapewnia kilka interfejsów do uzyskiwania dostępu do plików z „lokalnego” systemu plików :

1. Plik - plik indywidualny; zawiera informacje tylko do odczytu, takie jak nazwa, rozmiar pliku, typ MIME i odniesienie do uchwytu pliku.
2. FileList - tablicowa sekwencja obiektów File. (Myśleć<input type="file" multiple> lub przeciągnij katalog plików z pulpitu).
3. Blob - umożliwia pocięcie pliku na zakresy bajtów.

Zobacz komentarz Paula D. Waite'a poniżej.

AKTUALIZACJA Ta funkcja została usunięta od wersji Firefox 17 (patrz https://bugzilla.mozilla.org/show_bug.cgi?id=546848 ).

W przeglądarce Firefox możesz (programista) zrobić to z poziomu pliku JavaScript:

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

a Ty (użytkownik przeglądarki) zostaniesz poproszony o zezwolenie na dostęp. (w przypadku przeglądarki Firefox wystarczy to zrobić raz przy każdym uruchomieniu przeglądarki)

Jeśli użytkownik przeglądarki jest kimś innym, musi udzielić pozwolenia.

Jak wspomniano wcześniej, FileSystem i File API, wraz z FileWriter API, mogą być używane do odczytywania i zapisywania plików z kontekstu karty / okna przeglądarki na komputer kliencki.

Istnieje kilka rzeczy związanych z interfejsami API FileSystem i FileWriter, o których powinieneś wiedzieć, z których niektóre zostały wspomniane, ale warto je powtórzyć:

• Implementacje interfejsów API istnieją obecnie tylko w przeglądarkach opartych na Chromium (Chrome i Opera)
• Oba interfejsy API zostały usunięte ze ścieżki standardów W3C 24 kwietnia 2014 r. I od tej pory są zastrzeżone
• Możliwe jest usunięcie (obecnie zastrzeżonych) API z implementacji przeglądarek w przyszłości
• piaskownicy (a lokalizacja na zewnątrz dysku pliki, które mogą przynieść żadnego efektu) służy do przechowywania plików utworzonych za pomocą interfejsów API
• Wirtualny system plików (struktura katalogów, które niekoniecznie istnieje na dysku w tej samej formie, że nie kiedy dostęp z poziomu przeglądarki) jest używany reprezentują plików utworzonych za pomocą interfejsów API

Oto proste przykłady tego, jak interfejsy API są używane, bezpośrednio i pośrednio, w tandemie do wykonywania następujących czynności:

BakedGoods *

Zapisz plik:

bakedGoods.set({
    data: [{key: "testFile", value: "Hello world!", dataFormat: "text/plain"}],
    storageTypes: ["fileSystem"],
    options: {fileSystem:{storageType: Window.PERSISTENT}},
    complete: function(byStorageTypeStoredItemRangeDataObj, byStorageTypeErrorObj){}
});

Czytaj plik:

bakedGoods.get({
        data: ["testFile"],
        storageTypes: ["fileSystem"],
        options: {fileSystem:{storageType: Window.PERSISTENT}},
        complete: function(resultDataObj, byStorageTypeErrorObj){}
});

Korzystanie z nieprzetworzonych interfejsów API File, FileWriter i FileSystem

Zapisz plik:

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

Czytaj plik:

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

Chociaż API FileSystem i FileWriter nie są już na ścieżce standardów, moim zdaniem ich użycie może być uzasadnione w niektórych przypadkach, ponieważ:

• Ponowne zainteresowanie ze strony producentów przeglądarek, którzy nie wdrażają, może sprawić, że zostaną na niej z powrotem
• Penetracja rynku przeglądarek implementujących (opartych na Chromium) jest wysoka
• Google (główny twórca Chromium) nie podał ani daty zakończenia użytkowania interfejsów API

Jednak to, czy „niektóre przypadki” obejmują twoje własne, należy do ciebie.

* BakedGoods jest utrzymywane przez nikogo innego, jak tylko tego gościa tutaj :)

NW.js umożliwia tworzenie aplikacji komputerowych przy użyciu Javascript bez wszystkich ograniczeń bezpieczeństwa, które zwykle nakłada się na przeglądarkę. Możesz więc uruchamiać pliki wykonywalne z funkcją lub tworzyć / edytować / odczytywać / zapisywać / usuwać pliki. Możesz uzyskać dostęp do sprzętu, takiego jak bieżące użycie procesora lub całkowita używana pamięć RAM itp.

Możesz stworzyć aplikację desktopową dla systemu Windows, Linux lub Mac, która nie wymaga żadnej instalacji.

• http://nwjs.io

Oto framework dla NW.js, Universal GUI:

• http://ugui.io

Jeśli wdrażasz w systemie Windows, Host skryptów systemu Windows oferuje bardzo przydatny interfejs API JScript dla systemu plików i innych zasobów lokalnych. Włączanie skryptów WSH do lokalnej aplikacji internetowej może jednak nie być tak eleganckie, jak byś sobie życzył.

Jeśli masz pole wprowadzania, takie jak

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

Możesz dostać się do zawartości pliku w formacie BLOB:

function add(event){
  var userFile = document.getElementById('file');
  userFile.src = URL.createObjectURL(event.target.files[0]);
  var data = userFile.src;
}

FSO.js otacza nowy interfejs API systemu plików HTML5, który jest standaryzowany przez W3C i zapewnia niezwykle łatwy sposób odczytu, zapisu lub przechodzenia przez lokalny system plików w trybie piaskownicy. Jest asynchroniczny, więc operacje wejścia / wyjścia pliku nie będą przeszkadzać użytkownikowi. :)

Jeśli potrzebujesz dostępu do całego systemu plików na kliencie, odczytu / zapisu plików, obserwowania folderów pod kątem zmian, uruchamiania aplikacji, szyfrowania lub podpisywania dokumentów itp., Zapoznaj się z JSFS.

Umożliwia bezpieczny i nieograniczony dostęp ze strony internetowej do zasobów komputera klienta bez korzystania z technologii wtyczek przeglądarki, takich jak AcitveX lub Java Applet. Jednak należy również zainstalować oprogramowanie.

Aby pracować z JSFS, należy posiadać podstawową wiedzę na temat programowania w Javie i Java EE (serwlety).

Proszę znaleźć JSFS tutaj: https://github.com/jsfsproject/jsfs . Jest bezpłatny i objęty licencją GPL

Zakładając, że każdy plik, którego może potrzebować kod JavaScript, powinien być dozwolony bezpośrednio przez użytkownika. Twórcy znanych przeglądarek generalnie nie pozwalają JavaScriptowi na dostęp do plików.

Główną ideą rozwiązania jest to, że kod JavaScript nie może uzyskać dostępu do pliku, mając jego lokalny adres URL. Ale może użyć tego pliku, mając jego DataURL: więc jeśli użytkownik przegląda plik i otwiera go, JavaScript powinien pobierać „DataURL” bezpośrednio z HTML, zamiast „URL”.

Następnie przekształca DataURL w plik, używając funkcji readAsDataURL i obiektu FileReader. Źródło i bardziej kompletny przewodnik z ładnym przykładem znajdują się w:

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

Istnieje (komercyjny) produkt „localFS”, który może być używany do odczytu i zapisu całego systemu plików na komputerze klienckim.

Musi być zainstalowana mała aplikacja Windows i mały plik .js dołączony do twojej strony.

Ze względów bezpieczeństwa dostęp do systemu plików może być ograniczony do jednego folderu i chroniony tajnym kluczem.

https://www.fathsoft.com/localfs

jeśli używasz angularjs i aspnet / mvc, aby pobrać pliki json, musisz zezwolić na typ MIME w konfiguracji sieciowej

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