web-dev-qa-db-fra.com

HTML5 vous permet-il d'interagir avec les fichiers du client local à partir d'un navigateur?

J'ai vu des articles concernant l'accès aux fichiers sur un ordinateur client via une page Web, à savoir this question . 

J'essaie d'utiliser le paradigme de la "mise à jour continue dans le cloud" pour certains algorithmes que j'écris afin que mes utilisateurs puissent accéder aux dernières versions en accédant simplement à la page Web. Cela nécessite que le programme/la page Web puisse commencer par un répertoire et inspecter de manière récursive les fichiers qu'il contient et calculer les résultats en fonction de ce qui est trouvé. En fin de compte, il devrait également être capable d'écrire le fichier de résultats sur le système de fichiers du client.

L'une des réponses à la question précédente mentionne Google Gears mais a depuis été abandonné au profit de HTML5 . L'accès à un répertoire client est-il possible dans HTML5? Comment?

Je sais pourquoi l'accès d'une page Web à des fichiers locaux est un risque pour la sécurité, mais je n'ai aucun problème à demander à l'utilisateur les autorisations appropriées.

securityfile-iohtml5filesystems
30
greye

Non, pas directement au moins. Cependant, vous avez un certain nombre de choix ici.

Actuellement, vos meilleurs choix sont:

  • Glissez et déposez les fichiers du bureau, voir un tutoriel .
  • Utiliser le fichier de type d'entrée .
    • Lisez le contenu avec l'API de fichier ou soumettez le formulaire. En savoir plus sur Centre de développement Mozilla sur la lecture dynamique du fichier.
    • Vous pouvez spécifier l'attribut multiple pour lire et ouvrir plusieurs fichiers à la fois sans avoir à disposer de champs distincts.
    • Vous pouvez avoir une entrée invisible et "déclencher un clic" dessus pour ouvrir la boîte de dialogue d'ouverture de fichier. Consultez le lien précédent du Centre de développement Mozilla pour plus de détails.
  • Utilisez le FileSystem API qui vous permet de créer, supprimer, lire, modifier des fichiers sur le système de fichiers. Remarque: vous devez utiliser un répertoire en mode bac à sable, vous ne pouvez pas accéder à tout le système de cette façon.
  • Utilisez Java avec applets signés pour accéder à l'ensemble du système de fichiers. Cela nécessite que l'utilisateur accepte la signature.
30
Tower

Chrome 6 prendra également en charge l’API de fichier.

2
Vanuan

Comme mentionné précédemment, les API FileSystem _ et File , ainsi que l'API FileWriter , peuvent être utilisées pour lire et écrire des fichiers à partir du contexte d'un onglet de navigateur/fenêtre vers un ordinateur client.

Il y a plusieurs choses relatives aux API FileSystem et FileWriter dont vous devez être conscient, certaines d'entre elles ont été mentionnées, mais méritent d'être répétées:

  • Les implémentations des API n'existent actuellement que dans les navigateurs basés sur Chromium (Chrome et Opera).
  • Les deux API ont été retirées de la piste des normes W3C le 24 avril 2014 et sont à présent des solutions propriétaires. 
  • La suppression des API (désormais propriétaires) de la mise en œuvre de navigateurs dans le futur est une possibilité
  • Un sandbox (un emplacement sur le disque en dehors duquel les fichiers ne peuvent produire aucun effet) est utilisé pour stocker les fichiers créés avec les API
  • Un système de fichiers virtual (une structure de répertoires qui n'existe pas nécessairement sur le disque sous la même forme que celle utilisée lors de l'accès à partir du navigateur) est utilisé pour représenter les fichiers créés avec les API.

Voici des exemples simples de la façon dont les API sont utilisées, directement et indirectement, pour réaliser ces tâches:

BakedGoods *

Ecrire le fichier:

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

Lire le fichier:

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

Utilisation des API Raw File, FileWriter et FileSystem

Ecrire le fichier:

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

Lire le fichier:

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

Étant donné les statuts actuels des API FileSystem et FileWriter, leur utilisation pour lire et écrire des fichiers ne constitue pas actuellement un "moyen HTML5" de réaliser ces tâches.

Le regain d'intérêt pour les API des éditeurs de navigateurs non implémentés peut toutefois les replacer directement dans la voie des normes. Cela, combiné à la forte pénétration des navigateurs basés sur Chromium sur le marché et au fait que Google (le principal contributeur à Chromium) n’a pas donné de date de fin de vie aux API, devrait suffire à justifier leur utilisation dans certains cas. 

* BakedGoods est maintenu par nul autre que ce mec ici :)

0
Kevin