it-swarm.com.de

Ermöglicht HTML5 die Interaktion mit lokalen Client-Dateien in einem Browser

Ich habe einige Beiträge zum Zugriff auf Dateien auf einer Client-Maschine durch eine Webseite gesehen, nämlich diese Frage

Ich versuche, für einige Algorithmen, die ich schreibe, auf das "Continuous Update in the Cloud" - Paradigma zu hüpfen, sodass meine Benutzer auf die neuesten Versionen zugreifen können, indem sie einfach auf die Webseite zugreifen. Dies erfordert, dass das Programm/die Webseite mit einem Verzeichnis beginnen und rekursiv die darin enthaltenen Dateien prüfen und die Ergebnisse basierend auf dem gefundenen Ergebnis berechnen kann. Am Ende sollte es auch möglich sein, die Ergebnisdatei in das Dateisystem des Kunden zu schreiben.

Eine der Antworten in dieser vorherigen Frage erwähnt Google Gears, das jedoch zugunsten von HTML5 eingestellt wurde. Ist der Zugriff auf ein Client-Verzeichnis innerhalb von HTML5 möglich? Wie?

Ich weiß, warum der Zugriff von Webseiten auf lokale Dateien ein Sicherheitsrisiko darstellt, aber für meinen Zweck habe ich kein Problem, den Benutzer nach den entsprechenden Berechtigungen zu fragen.

30
greye

Nein, nicht direkt. Sie haben hier jedoch eine Reihe von Möglichkeiten.

Derzeit sind Ihre besten Entscheidungen:

  • Drag & Drop von Dateien vom Desktop, siehe ein Tutorial .
  • Eingabedatei verwenden.
    • Lesen Sie den Inhalt mit der Datei-API oder senden Sie das Formular ab. Lesen Sie mehr über Mozilla Developer Center zum dynamischen Lesen der Datei.
    • Sie können das Attribut multiple angeben, um mehrere Dateien gleichzeitig zu lesen und zu öffnen, ohne dass separate Felder erforderlich sind.
    • Sie können eine unsichtbare Eingabe haben und einen "Klick" auslösen, um den Dateiöffnungsdialog zu öffnen. Einzelheiten finden Sie unter dem vorherigen Link zum Mozilla Developer Center.
  • Verwenden Sie die FileSystem API , mit der Sie Dateien im Dateisystem erstellen, löschen, lesen und ändern können. Hinweis: Sie erhalten ein Sandkasten-Verzeichnis, mit dem Sie arbeiten können. Sie können nicht einfach auf das gesamte System zugreifen.
  • Verwenden Sie Java mit signierten Applets , um auf das gesamte Dateisystem zuzugreifen. Dies erfordert, dass der Benutzer die Signatur akzeptiert.
30
Tower

Chrome 6 unterstützt auch die Datei-API

2
Vanuan

Wie bereits erwähnt, können die APIs FileSystem und File zusammen mit der API FileWriter zum Lesen und Schreiben von Dateien aus dem Kontext eines Browser-Registers/Fensters auf einen Client-Computer verwendet werden.

Es gibt einige Dinge, die sich auf die FileSystem- und FileWriter-APIs beziehen, von denen Sie wissen sollten, von denen einige erwähnt wurden, die sich jedoch wiederholen sollten:

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

Hier sind einfache Beispiele für die direkte und indirekte Verwendung der APIs im Tandem, um diese Aufgaben auszuführen:

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 rohen Datei-, 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);

Angesichts des aktuellen Status der FileSystem- und FileWriter-APIs stellt ihre Verwendung zum Lesen und Schreiben von Dateien derzeit keine "HTML5-Methode" für diese Vorgänge dar.

Erneutes Interesse an den APIs von nicht implementierenden Browseranbietern kann sie jedoch wieder auf den Stand der Standards bringen. Dies, in Verbindung mit der hohen Marktdurchdringung von auf Chromium basierenden Browsern und der Tatsache, dass Google (der Hauptverursacher von Chromium) und das End-of-Life-Datum den APIs nicht gegeben haben, sollte ausreichen, um ihre Verwendung in einigen Fällen zu rechtfertigen. 

* BakedGoods wird hier von keinem anderen als diesem Kerl unterhalten :)

0
Kevin