Accès aux fichiers locaux avec JavaScript
Existe-t-il une manipulation de fichier locale réalisée avec JavaScript? Je recherche une solution réalisable sans aucune empreinte d'installation telle que le nécessite Adobe AIR .
Plus précisément, j'aimerais lire le contenu d'un fichier et l'écrire dans un autre fichier. À ce stade, je ne suis pas inquiet à propos de l'obtention d'autorisations et je suppose simplement que j'ai déjà des autorisations complètes sur ces fichiers.
Si l'utilisateur sélectionne un fichier via <input type="file">, vous pouvez lire et traiter ce fichier à l'aide de File API .
La conception ou la lecture de fichiers arbitraires n’est pas autorisée. C'est une violation du bac à sable. De Wikipedia -> Javascript -> Sécurité :
JavaScript et le DOM permettent aux auteurs malveillants de fournir des scripts pouvant s'exécuter sur un ordinateur client via le Web. Les auteurs de navigateur contiennent ce risque en utilisant deux restrictions. Premièrement, les scripts sont exécutés dans un sandbox dans lequel ils ne peuvent effectuer que des actions liées au Web, et non des tâches de programmation générales telles que la création de fichiers .
2016 UPDATE : L'accès direct au système de fichiers est possible via API du système de fichiers , qui est niquement pris en charge par Chrome et Opera et peut ne pas être implémenté par d'autres navigateurs (avec le à l'exception de Edge ). Pour plus de détails, voir réponse de Kevin .
Une mise à jour des fonctionnalités HTML5 se trouve dans http://www.html5rocks.com/en/tutorials/file/dndfiles/ . Cet excellent article expliquera en détail l’accès aux fichiers locaux en JavaScript. Résumé de l'article mentionné:
La spécification fournit plusieurs interfaces pour accéder aux fichiers depuis un système de fichiers 'local' :
- Fichier - un fichier individuel; fournit des informations en lecture seule telles que le nom, la taille du fichier, le type MIME et une référence au descripteur de fichier.
- FileList - une séquence d'objets File semblable à un tableau. (Pensez
<input type="file" multiple>ou faites glisser un répertoire de fichiers depuis le bureau). - Blob - Permet de découper un fichier en plages d'octets.
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 depuis un fichier JavaScript:
netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserWrite");
et vous (l'utilisateur du navigateur) serez invité à autoriser l'accès. (Pour Firefox, il suffit de le faire une fois à chaque démarrage du navigateur)
Si l'utilisateur du navigateur est quelqu'un d'autre, il doit accorder une autorisation.
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'une onglet/fenêtre du navigateur sur un ordinateur client.
Il y a plusieurs choses relatives aux API FileSystem et FileWriter dont vous devez être conscient, dont certaines 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 de normes du 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 virtuel (une structure de répertoires qui n'existe pas nécessairement sur le disque sous la même forme que celle utilisée lors d'un accès depuis le navigateur) est utilisé 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:
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 brutes 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);
Bien que les API FileSystem et FileWriter ne soient plus sur la voie des normes, leur utilisation peut être justifiée dans certains cas, à mon avis, pour les raisons suivantes:
- L'intérêt renouvelé des vendeurs de navigateurs non-implémentés peut leur redonner tout leur sens.
- La pénétration des navigateurs (basés sur le chrome) sur le marché est élevée
- Google (principal contributeur à Chrome) n'a pas donné de date de fin de vie aux API
Que "certains cas" englobe le vôtre, cependant, c'est à vous de décider.
* BakedGoods est maintenu par personne d’autre que ce type ici:)
NW.js vous permet de créer des applications de bureau utilisant Javascript, sans toutes les restrictions de sécurité habituellement placées sur le navigateur. Vous pouvez donc exécuter des exécutables avec une fonction ou créer/éditer/lire/écrire/supprimer des fichiers. Vous pouvez accéder au matériel, tel que l'utilisation actuelle du processeur ou la quantité totale de RAM utilisée, etc.
Vous pouvez créer une application de bureau Windows, Linux ou Mac qui ne nécessite aucune installation.
Voici un cadre pour NW.js, l'interface graphique universelle:
Si vous déployez sur Windows, le Windows Script Host offre une API JScript très utile au système de fichiers et à d'autres ressources locales. L’incorporation de scripts WSH dans une application Web locale n’est peut-être pas aussi élégante que vous le souhaiteriez.
Si vous avez un champ de saisie comme
<input type="file" id="file" name="file" onchange="add(event)"/>
Vous pouvez accéder au contenu du fichier au format BLOB:
function add(event){
var userFile = document.getElementById('file');
userFile.src = URL.createObjectURL(event.target.files[0]);
var data = userFile.src;
}
FSO.js enveloppe la nouvelle API HTML5 FileSystem normalisée par le W3C et fournit un moyen extrêmement simple de lire, écrire ou traverser un système de fichiers en bac à sable local. C'est asynchrone, donc les E/S sur fichier n'interféreront pas avec l'expérience utilisateur. :)
Si vous avez besoin d'accéder à l'intégralité du système de fichiers du client, de lire/écrire des fichiers, de surveiller les modifications dans les dossiers, de démarrer des applications, de chiffrer ou de signer des documents, etc., jetez un coup d'œil à JSFS.
Il permet un accès sécurisé et illimité depuis votre page Web aux ressources de l'ordinateur sur le client sans utiliser une technologie de plug-in de navigateur telle que AcitveX ou Java Applet. Cependant, une quantité de logiciel doit également être installée.
Afin de 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 le code JavaScript pourrait avoir besoin, devrait être autorisé directement par l'utilisateur. Les créateurs de navigateurs célèbres ne permettent généralement pas aux fichiers JavaScript d'accéder aux fichiers.
L'idée principale de la solution est la suivante: le code JavaScript ne peut pas accéder au fichier en ayant son URL locale. Mais il peut utiliser le fichier en ayant son DataURL: ainsi, si l'utilisateur parcourt un fichier et l'ouvre, JavaScript doit obtenir le "DataURL" directement à partir de HTML au lieu de "URL".
Ensuite, il transforme DataURL en un fichier, à l'aide de la fonction readAsDataURL et de l'objet FileReader. Source et un guide plus complet avec un exemple de Nice sont dans:
Il existe un produit (commercial), "localFS", qui peut être utilisé pour lire et écrire le système de fichiers complet sur l'ordinateur client.
Petite application Windows doit être installé et votre fichier .js doit être inclus dans votre page.
En tant que fonctionnalité de sécurité, l'accès au système de fichiers peut être limité à un dossier et protégé par une clé secrète.