Lokaler Dateizugriff mit JavaScript

Gibt es eine lokale Dateimanipulation, die mit JavaScript durchgeführt wurde? Ich bin auf der Suche nach einer Lösung, die ohne Installationsaufwand wie Adobe AIR ausgeführt werden kann .

Insbesondere möchte ich den Inhalt aus einer Datei lesen und diesen Inhalt in eine andere Datei schreiben. An diesem Punkt mache ich mir keine Sorgen um das Erhalten von Berechtigungen und gehe nur davon aus, dass ich bereits über die vollständigen Berechtigungen für diese Dateien verfüge.

Wenn der Benutzer eine Datei über auswählt <input type="file">, können Sie diese Datei mithilfe der Datei-API lesen und verarbeiten .

Das Lesen oder Schreiben beliebiger Dateien ist nicht zulässig. Es ist eine Verletzung des Sandkastens. Aus Wikipedia -> Javascript -> Sicherheit :

JavaScript und das DOM bieten böswilligen Autoren die Möglichkeit, Skripte bereitzustellen, die auf einem Client-Computer über das Web ausgeführt werden. Browser-Autoren begrenzen dieses Risiko mit zwei Einschränkungen. Erstens werden Skripte in einer Sandbox ausgeführt, in der sie nur webbezogene Aktionen ausführen können, keine allgemeinen Programmieraufgaben wie das Erstellen von Dateien .

2016 UPDATE : Der direkte Zugriff auf das Dateisystem ist über die Dateisystem-API möglich , die nur von Chrome und Opera unterstützt wird und möglicherweise nicht von anderen Browsern implementiert wird (mit Ausnahme von Edge ). Für Details siehe Kevins Antwort .

Nur ein Update der HTML5-Funktionen finden Sie unter http://www.html5rocks.com/en/tutorials/file/dndfiles/ . In diesem hervorragenden Artikel wird der lokale Dateizugriff in JavaScript ausführlich erläutert. Zusammenfassung aus dem genannten Artikel:

Die Spezifikation bietet mehrere Schnittstellen für den Zugriff auf Dateien aus einem "lokalen" Dateisystem :

1. Datei - eine einzelne Datei; Bietet schreibgeschützte Informationen wie Name, Dateigröße, MIME-Typ und einen Verweis auf das Dateihandle.
2. FileList - eine Array-ähnliche Folge von Dateiobjekten. (Denken Sie an <input type="file" multiple>ein Verzeichnis von Dateien oder ziehen Sie es vom Desktop.)
3. Blob - Ermöglicht das Aufteilen einer Datei in Bytebereiche.

Siehe den Kommentar von Paul D. Waite unten.

UPDATE Diese Funktion wurde seit Firefox 17 entfernt (siehe https://bugzilla.mozilla.org/show_bug.cgi?id=546848 ).

In Firefox können Sie (der Programmierer) dies aus einer JavaScript-Datei heraus tun:

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

und Sie (der Browser-Benutzer) werden aufgefordert, den Zugriff zuzulassen. (Für Firefox müssen Sie dies nur einmal bei jedem Start des Browsers tun.)

Wenn der Browserbenutzer eine andere Person ist, muss er die Berechtigung erteilen.

Wie bereits erwähnt, können die FileSystem- und File- APIs zusammen mit der FileWriter- API zum Lesen und Schreiben von Dateien aus dem Kontext einer Browserregisterkarte / eines Browserfensters auf einen Clientcomputer verwendet werden.

Im Zusammenhang mit den APIs FileSystem und FileWriter sollten Sie einige Dinge beachten, von denen einige erwähnt wurden, die jedoch wiederholt werden sollten:

• Implementierungen der APIs sind derzeit nur in Chromium-basierten Browsern (Chrome & Opera) vorhanden.
• Beide APIs wurden am 24. April 2014 aus dem W3C-Standard-Track entfernt und sind ab sofort proprietär
• Das Entfernen der (jetzt proprietären) APIs aus zukünftigen Implementierungen von Browsern ist möglich
• Ein Sandkasten (ein Speicherort auf der Festplatte, außerhalb dessen Dateien keine Auswirkungen haben können) wird zum Speichern der mit den APIs erstellten Dateien verwendet
• Ein virtuelles Dateisystem (eine Verzeichnisstruktur, die nicht unbedingt in derselben Form auf der Festplatte vorhanden ist wie beim Zugriff über den Browser) repräsentiert die mit den APIs erstellten Dateien

Hier sind einfache Beispiele dafür, wie die APIs direkt und indirekt zusammen verwendet werden, um diese Dinge zu tun:

BakedGoods *

Datei schreiben:

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

Datei lesen:

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

Verwenden der Rohdatei-, FileWriter- und FileSystem-APIs

Datei schreiben:

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

Datei lesen:

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

Obwohl die FileSystem- und FileWriter-APIs nicht mehr auf der Standardspur sind, kann ihre Verwendung meiner Meinung nach in einigen Fällen gerechtfertigt sein, weil:

• Erneutes Interesse der nicht implementierenden Browser-Anbieter kann sie direkt wieder darauf setzen
• Die Marktdurchdringung der Implementierung von (Chromium-basierten) Browsern ist hoch
• Google (der Hauptverursacher von Chromium) hat den APIs kein Datum für das Ende der Lebensdauer angegeben

Ob "einige Fälle" Ihre eigenen umfassen, müssen Sie jedoch selbst entscheiden.

* BakedGoods wird von niemand anderem als diesem Kerl hier gepflegt :)

Mit NW.js können Sie Desktop-Anwendungen mit Javascript erstellen, ohne alle Sicherheitsbeschränkungen zu beachten, die normalerweise für den Browser gelten. Sie können also ausführbare Dateien mit einer Funktion ausführen oder Dateien erstellen / bearbeiten / lesen / schreiben / löschen. Sie können auf die Hardware zugreifen, z. B. auf die aktuelle CPU-Auslastung oder den insgesamt verwendeten RAM usw.

Sie können damit eine Windows-, Linux- oder Mac-Desktop-Anwendung erstellen, für die keine Installation erforderlich ist.

• http://nwjs.io

Hier ist ein Framework für NW.js, die universelle GUI:

• http://ugui.io

Wenn Sie unter Windows bereitstellen, bietet der Windows Script Host eine sehr nützliche JScript-API für das Dateisystem und andere lokale Ressourcen. Das Einbinden von WSH-Skripten in eine lokale Webanwendung ist jedoch möglicherweise nicht so elegant, wie Sie es wünschen.

Wenn Sie Eingabefeld wie haben

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

Sie können Dateiinhalte im BLOB-Format abrufen:

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

FSO.js umschließt die neue HTML5-Dateisystem-API, die vom W3C standardisiert wird, und bietet eine äußerst einfache Möglichkeit, aus einem lokalen Sandbox-Dateisystem zu lesen, in dieses zu schreiben oder es zu durchlaufen. Es ist asynchron, sodass die Datei-E / A die Benutzererfahrung nicht beeinträchtigt. :) :)

Wenn Sie Zugriff auf das gesamte Dateisystem auf dem Client benötigen, Dateien lesen / schreiben, Ordner auf Änderungen überwachen, Anwendungen starten, Dokumente verschlüsseln oder signieren usw., schauen Sie sich bitte JSFS an.

Es ermöglicht einen sicheren und unbegrenzten Zugriff von Ihrer Webseite auf Computerressourcen auf dem Client, ohne eine Browser-Plugin-Technologie wie AcitveX oder Java Applet zu verwenden. Es muss jedoch auch eine gewisse Software installiert werden.

Um mit JSFS arbeiten zu können, sollten Sie über Grundkenntnisse in der Java- und Java EE-Entwicklung (Servlets) verfügen.

JSFS finden Sie hier: https://github.com/jsfsproject/jsfs . Es ist kostenlos und unter der GPL lizenziert

Angenommen, jede Datei, die JavaScript-Code benötigt, sollte direkt vom Benutzer zugelassen werden. Entwickler berühmter Browser lassen JavaScript im Allgemeinen nicht auf Dateien zugreifen.

Die Hauptidee der Lösung ist: Der JavaScript-Code kann nicht über seine lokale URL auf die Datei zugreifen. Die Datei kann jedoch mithilfe der DataURL verwendet werden. Wenn der Benutzer eine Datei durchsucht und öffnet, sollte JavaScript die "DataURL" direkt aus HTML abrufen, anstatt die "URL" abzurufen.

Anschließend wird die DataURL mithilfe der Funktion readAsDataURL und des FileReader-Objekts in eine Datei umgewandelt. Quelle und eine vollständigere Anleitung mit einem schönen Beispiel finden Sie in:

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

Es gibt ein (kommerzielles) Produkt, "localFS", mit dem das gesamte Dateisystem auf dem Client-Computer gelesen und geschrieben werden kann.

Eine kleine Windows-App muss installiert und eine winzige .js-Datei auf Ihrer Seite enthalten sein.

Aus Sicherheitsgründen kann der Dateisystemzugriff auf einen Ordner beschränkt und mit einem geheimen Schlüssel geschützt werden.

https://www.fathsoft.com/localfs

Wenn Sie anglejs & aspnet / mvc verwenden, um JSON-Dateien abzurufen, müssen Sie den MIME-Typ in der Webkonfiguration zulassen

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