Lokalen Zugriff auf Dateien mit javascript

Nur ein update für das HTML5-Funktionen http://www.html5rocks.com/en/tutorials/file/dndfiles/ Diesem exzellenten Artikel erklärt en detail den lokalen Zugriff auf Dateien in Javascript. Zusammenfassung aus dem genannten Artikel:

Spec bietet verschiedene Schnittstellen für Zugriff auf Dateien von einem 'local' - Dateisystem:

1. Datei eine einzelne Datei; bietet readonly Informationen wie name, Datei-Größe, mimetype, und einen Verweis auf den Datei-handle.
2. FileList - array-ähnlichen Sequenz von File-Objekten. (Denke <input type="file" multiple> oder ziehen Sie ein Verzeichnis von Dateien aus dem desktop).
3. Blob - Ermöglicht das unterteilen einer Datei in bytebereiche.

-- Edit --

Siehe Paul D. Waite ' s Kommentar unten

InformationsquelleAutor Horst Walter

Wie bereits erwähnt, die Dateisystem und Datei APIs, zusammen mit der FileWriter - API kann verwendet werden, um Lesen und schreiben von Dateien aus dem Kontextmenü des browser-tab/Fenster zu einer client-Maschine.

Gibt es einige Dinge in Bezug auf das Dateisystem-und FileWriter-APIs, die Sie sollten sich bewusst sein, von denen einige erwähnt wurden, aber lohnt sich zu wiederholen:

• Implementierungen der APIs existieren derzeit nur in Chromium-basierten Browsern (Chrome & Opera)
• Beide APIs abgenommen wurden, der die W3C-standards track-April 24, 2014, und jetzt sind proprietäre
• Entfernung des (nun proprietären APIs, die aus der Implementierung von Browsern in der Zukunft ist eine Möglichkeit,
• Eine sandbox (einen Speicherort auf der Festplatte außerhalb der Dateien produzieren kann, keine Wirkung) wird zum speichern der erstellten Dateien mit den APIs
• Eine virtual file system (eine Verzeichnis-Struktur, die nicht unbedingt vorhanden sind auf der Festplatte in der gleichen form, dass es funktioniert, wenn der Zugriff aus dem browser) verwendet wird, stellen die erstellten Dateien mit den APIs

Hier sind einfache Beispiele dafür, wie die APIs genutzt werden, direkt und indirekt, im tandem, diese Dinge zu tun:

BakedGoods*

Schreiben der Datei:

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

Mit dem raw-File, FileWriter und Dateisystem-APIs

Schreiben der Datei:

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 das Dateisystem und FileWriter-APIs sind nicht mehr auf den standards track, deren Verwendung gerechtfertigt werden kann, in einigen Fällen, meiner Meinung nach, da:

• Erneutes Interesse von den Vereinten Nationen-Implementierung der browser-Hersteller kann Sie gleich wieder drauf
• Marktdurchdringung der Umsetzung (Chrom-basierten) Browser, ist die hohe
• Google (die Haupt-Mitwirkender, Chrom) nicht gegeben hat, und end-of-life Datum zu den APIs

Ob "einigen Fällen" umfasst Ihre eigenen, jedoch für Sie ist zu entscheiden.

*BakedGoods wird verwaltet von keiner anderen als dieser Kerl hier 🙂

InformationsquelleAutor Kevin

Wenn Sie die Bereitstellung auf Windows, die Windows Script Host bietet eine sehr nützliche JScript-API die Datei-system und andere lokale Ressourcen. Die Einbeziehung der WSH-Skripts in eine lokale web-Anwendung möglicherweise nicht so elegant, wie Sie vielleicht wünschen, aber.

InformationsquelleAutor Traphicone

FSO.js wraps mit den neuen HTML5 FileSystem API, mit der die Standardisierung durch das W3C und bietet eine extrem einfach Weg zum Lesen, schreiben, oder durchqueren Sie eine lokale Sandbox-Dateisystem. Es ist eine asynchrone, also Datei-E /a wird nicht behindert Benutzer-Erfahrung. 🙂

InformationsquelleAutor kwh

unter der Annahme, dass jede Datei, eine js brauchen könnte, erlaubt sein sollte, direkt durch den Benutzer, Schöpfer der berühmten Browsern lassen Sie sich nicht von javascript-Dateien zugreifen, die in der Regel.

Grundidee der Lösung: das javascript kann nicht auf die Datei zugreifen, indem Sie die lokale URL.
aber es kann die Datei verwenden, indem er es DataURL: also, wenn Benutzer durchsucht eine Datei und öffnet diese, js, sollte sich die "DataURL" direkt aus HTML-Code anstelle von "URL".

Dann wird die DataURL in eine Datei, mit readAsDataURL Funktion und FileReader-Objekt.
Quelle und vollständiger Führer mit einem schönen Beispiel:

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

InformationsquelleAutor Makan Tayebi

wenn Sie mit angularjs & aspnet/mvc, abrufen von json-Dateien, die Sie
gestatten, mime-Typ in der web-config

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

InformationsquelleAutor Mohamed.Abdo