Accès aux fichiers locaux avec javascript

juste une mise à jour des fonctionnalités HTML5 http://www.html5rocks.com/en/tutorials/file/dndfiles / cet excellent article explique en détail l'accès au fichier local en Javascript. Résumé de l'article cité:

La spécification fournit plusieurs interfaces pour l'accès à des fichiers à partir d'un "local" système de fichiers :

1. Fichier-un fichier individuel; fournit uniquement des renseignements tels que le nom, Taille du fichier, mimetype, et une référence à la poignée du fichier.
2. FileList - un tableau comme la séquence d'objets de Fichier. (Pensez à <input type="file" multiple> ou à faire glisser un répertoire de fichiers depuis le bureau).
3. Blob-permet de découper un fichier dans des gammes de octets.

-- Edit --

voir le commentaire de Paul D. Waite ci-dessous

UPDATE cette fonctionnalité est supprimée depuis Firefox 17 (voir https://bugzilla.mozilla.org/show_bug.cgi?id=546848 ).

sur Firefox vous (le programmeur) pouvez le faire à partir d'un fichier JavaScript:

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

et vous (l'utilisateur du navigateur) seront invités à autoriser l'accès. (pour Firefox, vous avez juste besoin de le faire une fois chaque démarrage du navigateur)

si l'utilisateur du navigateur est quelqu'un d'autre, il doit accorder la permission.

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/fenêtre de navigateur vers une machine client.

il y a plusieurs choses concernant le système de fichiers et les API du FileWriter que vous devez connaître, dont certaines ont été mentionnées, mais qui valent la peine d'être répétées:

• les implémentations des API n'existent actuellement que dans les navigateurs à base de Chrome (Chrome & Opera)
• les deux API ont été retirées de la piste standard du W3C le 24 avril 2014, et sont désormais propriétaires""
• la suppression des API (maintenant propriétaires) de la mise en œuvre des navigateurs à l'avenir est une possibilité
• A sandbox (un emplacement sur le disque à l'extérieur duquel les fichiers peuvent produire aucun effet) est utilisé pour stocker les fichiers créés avec l'Api
• A virtual file system (une structure de répertoire qui n'existe pas nécessairement sur disque sous la même forme qu'elle lorsqu'elle est consultée à partir de l'intérieur du navigateur) est utilisé représentent les fichiers créés avec L'API

Voici des exemples simples de la façon dont les API sont utilisées, directement et indirectement, en tandem pour faire ces choses:

BakedGoods *

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

utilisant le fichier brut, le FileWriter, et le système de fichiers APIs

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

bien que le système de fichiers et les API de FileWriter ne soient plus sur la piste des standards, leur utilisation peut être justifié dans certains cas, à mon avis, parce que:

• un regain d'intérêt de la part des vendeurs de navigateur de mise en œuvre des Nations Unies peut les y remettre
• la pénétration du Marché de la mise en œuvre (Chrome) des navigateurs est élevée
• Google (le principal contributeur au chrome) n'a pas donné et date de fin de vie à L'APIs

si "certains cas" englobent les vôtres, cependant, est à vous de décider.

*BakedGoods est maintenu par rien d'autre que ce gars juste ici :)

NW.js vous permet de créer des applications bureautiques en utilisant Javascript sans toutes les restrictions de sécurité habituellement placées sur le navigateur. Ainsi, vous pouvez exécuter des exécutables avec une fonction, ou créer/éditer/lire/écrire/supprimer des fichiers. Vous pouvez accéder au matériel, comme L'utilisation actuelle du CPU ou la ram totale utilisée, etc.

vous pouvez créer une application Windows, linux ou mac desktop qui ne nécessite aucune installation.

• http://nwjs.io

Ici est un cadre de NW.js, de l'Universel GUI:

• http://ugui.io

si vous vous déployez sur Windows, Le Windows Script Host offre une API JScript très utile pour le système de fichiers et d'autres ressources locales. Intégrer des scripts WSH dans une application web locale peut ne pas être aussi élégant que vous pourriez le souhaiter, cependant.

de l'OFS.js enveloppe la nouvelle API du système de fichiers HTML5 qui est standardisée par le W3C et fournit une façon extrêmement facile de lire, écrire ou parcourir un système de fichiers local. C'est asynchrone donc file IO n'interférera pas avec l'expérience de l'utilisateur. :)

si vous avez un champ input comme

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

vous pouvez obtenir des fichiers au format BLOB:

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

si vous avez besoin d'accéder à l'ensemble du système de fichiers sur le client, lire/écrire des fichiers, surveiller les dossiers pour les changements, démarrer des applications, chiffrer ou signer des documents, etc. s'il vous plaît jeter un oeil à JSFS.

il permet l'accès sécurisé et illimité de votre page web aux ressources informatiques sur le client sans utiliser une technologie de plugin de navigateur comme AcitveX ou Java Applet. Cependant, une tranquillité de logiciel doit être installée aussi.

pour travailler avec JSFS vous devez avoir des connaissances de base en développement Java et Java EE (Servlets).

Veuillez trouver JSFS ici: https://github.com/jsfsproject/jsfs . C'est gratuit et sous licence GPL

en supposant que tout fichier dont un js pourrait avoir besoin, devrait être autorisé directement par l'utilisateur, les créateurs de navigateurs célèbres ne laissent pas javascript accéder aux fichiers en général.

l'idée principale de la solution est: le javascript ne peut pas accéder au fichier en ayant son URL locale. mais il peut utiliser le fichier en ayant son DataURL: donc si l'utilisateur parcourt un fichier et l'ouvre, js devrait obtenir le "DataURL" directement à partir de HTML au lieu d'obtenir "URL".

puis il tourne le DataURL dans un fichier, en utilisant la fonction readAsDataURL et L'objet FileReader. source et un guide plus complet avec un bel exemple:

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

si vous utilisez angularjs & aspnet / mvc, pour récupérer des fichiers json, vous doivent permettre le type mime à la config web

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