L'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 va vous expliquer en détail le local d'accès au fichier en Javascript. Résumé de l'article ci-dessus:

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

1. De fichier d'un fichier individuel; fournit readonly informations telles que le nom, la taille du fichier, le type mime, et une référence pour le descripteur de fichier.
2. FileList - un tableau comme la séquence d'objets de Fichier. (Pensez à <input type="file" multiple> ou en faisant glisser un répertoire de fichiers depuis le bureau).
3. Blob Permet le découpage d'un fichier en octets plages.

-- Edit --

Voir Paul D. Waite de commentaire ci-dessous

Comme mentionné précédemment, le Système de fichiers et Fichier Api, ainsi que les FileWriter API, peut être utilisé pour lire et écrire des fichiers à partir du contexte d'un navigateur à onglet/fenêtre sur un ordinateur client.

Il y a plusieurs choses concernant le système de fichiers et FileWriter Api dont vous devez être conscient de, dont certains ont été mentionnés, mais valent la peine de le répéter:

• Implémentations de l'Api existent actuellement que dans Chrome navigateurs (Chrome & Opéra)
• À la fois de l'Api ont été pris sur des normes W3C piste le 24 avril 2014, et que, désormais, sont la propriété
• Suppression de la (désormais propriétaire) Api à partir de la mise en œuvre des navigateurs dans le futur est une possibilité
• Un sandbox (un emplacement sur le disque à l'extérieur de fichiers qui peuvent produire aucun effet) est utilisé pour stocker les fichiers créés avec l'Api
• Un système de fichiers virtuel (une structure de répertoire qui n'existe pas forcément sur le disque dans la même forme que lorsqu'elle est accessible à partir du navigateur) est utilisé représentent les fichiers créés avec l'Api

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

BakedGoods*

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

En utilisant le Fichier raw, FileWriter, et le système de fichier Api

D'é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);

Si le système de fichiers et FileWriter Api ne sont plus sur le suivi des normes, leur utilisation peut être justifiée dans certains cas, à mon avis, parce que:

• Regain d'intérêt de l'onu-la mise en œuvre de fournisseurs de navigateur peuvent placer leur droit de retour sur elle
• De la pénétration du marché de la mise en œuvre (Chrome) sur les navigateurs est élevé
• Google (le principal contributer à Chrome) n'a pas donné et en fin de vie date de l'Api

Si "certains cas" englobe votre propre, cependant, c'est à vous de décider.

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

Si vous êtes le déploiement sur Windows, le Windows Script Host propose une très utile JScript API du système de fichiers et autres ressources locales. Intégrant des scripts WSH dans un local de l'application web peut ne pas être aussi élégant que vous pourriez souhaiter, cependant.

FSO.js enveloppe le nouveau HTML5 système de fichiers de l'API qui est en cours de standardisation par le W3C et fournit un extrêmement facile façon de lire, écrire, ou traverser un local sandbox système de fichiers. Il est asynchrone, donc e /s de fichier ne sera pas interférer avec l'expérience de l'utilisateur. 🙂

à supposer qu'un fichier js pourriez avoir besoin, devraient être autorisés directement par l'utilisateur, les créateurs des célèbres navigateurs ne laissez pas accès javascript en général, les fichiers.

idée principale de la solution est: le javascript ne peut pas accéder au fichier en local de l'URL.
mais il peut utiliser le fichier en avoir c'est DataURL: donc, si l'utilisateur navigue sur un fichier et l'ouvre, js devrait obtenir le "DataURL" directement à partir de l'HTML au lieu de se faire "URL".

Puis il tourne la DataURL dans un fichier, à l'aide de readAsDataURL fonction et objet FileReader.
source et un guide plus complet avec un joli exemple:

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

si vous êtes en utilisant angularjs & aspnet/mvc, pour récupérer des fichiers json, vous
autoriser type mime web de la config

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