Comment lire et écrire dans un fichier en utilisant JavaScript?
Quelqu'un peut-il donner un exemple de code pour lire et écrire un fichier en utilisant JavaScript?
Pour être complet, le PO ne dit pas qu'il cherche à le faire dans un navigateur (s'il est, comme cela a été dit, ce n'est généralement pas possible)
Cependant, javascript permet cela; cela peut être fait avec javascript côté serveur.
Voir cette documentation sur la classe de fichier Javascript
Edit: ce lien était lié aux documents Sun qui ont maintenant été déplacés par Oracle.
Pour suivre le rythme, voici la documentation de node.js pour la classe FileSystem: http://nodejs.org/docs/latest/api/fs.html
Edit (2): Vous pouvez maintenant lire des fichiers côté client avec HTML5: http://www.html5rocks.com/fr/tutorials/file/dndfiles/
Non, javascript côté navigateur n'est pas autorisé à écrire sur la machine cliente sans devoir désactiver de nombreuses options de sécurité
L'avenir est là! Les propositions sont presque terminées, plus d'ActiveX, de Flash ou de Java. Maintenant nous pouvons utiliser:
Vous pouvez utiliser le glisser/déposer pour insérer le fichier dans le navigateur ou un simple contrôle de téléchargement. Une fois que l'utilisateur a sélectionné un fichier, vous pouvez le lire avec Javascript: http://www.html5rocks.com/fr/tutorials/file/dndfiles/
voici la proposition mozilla
http://www-archive.mozilla.org/js/js-file-object.html
ceci est implémenté avec un commutateur de compilation dans spidermonkey, ainsi que dans le extendcript d'Adobe. De plus (je pense) vous obtenez l'objet File dans les extensions firefox.
rhino a une fonction readFile (plutôt rudementaire ) https://developer.mozilla.org/en/Rhino_Shell
pour des opérations de fichier plus complexes dans rhino, vous pouvez utiliser les méthodes Java.io.File.
vous n'obtiendrez cependant rien de tout cela dans le navigateur. Pour des fonctionnalités similaires dans un navigateur, vous pouvez utiliser les fonctions de base de données SQL de HTML5, la persistance côté client, les cookies et les objets de stockage flash.
Cette fonction Javascript présente une boîte de dialogue "Enregistrer sous" complète à l'utilisateur qui l'exécute via le navigateur. L'utilisateur appuie sur OK et le fichier est enregistré.
Edit: Le code suivant ne fonctionne qu'avec le navigateur IE car Firefox et Chrome ont considéré ce code comme un problème de sécurité et l’ont empêché de fonctionner.
// content is the data you'll write to file<br/>
// filename is the filename<br/>
// what I did is use iFrame as a buffer, fill it up with text
function save_content_to_file(content, filename)
{
var dlg = false;
with(document){
ir=createElement('iframe');
ir.id='ifr';
ir.location='about.blank';
ir.style.display='none';
body.appendChild(ir);
with(getElementById('ifr').contentWindow.document){
open("text/plain", "replace");
charset = "utf-8";
write(content);
close();
document.charset = "utf-8";
dlg = execCommand('SaveAs', false, filename+'.txt');
}
body.removeChild(ir);
}
return dlg;
}
Invoquer la fonction:
save_content_to_file("Hello", "C:\\test");
Si vous utilisez JScript (JavaScript de Microsoft) pour effectuer des scripts locaux à l'aide de WSH (PAS dans un navigateur!), Vous pouvez utiliser Scripting.FileSystemObject pour accéder au système de fichiers.
Je pense que vous pouvez accéder au même objet dans IE si vous désactivez de nombreux paramètres de sécurité, mais ce serait une très, très mauvaise idée.
Pour Firefox:
var file = Components.classes["@mozilla.org/file/local;1"].
createInstance(Components.interfaces.nsILocalFile);
file.initWithPath("/home");
Voir https://developer.mozilla.org/en-US/docs/Code_snippets/File_I_O
Pour les autres, consultez le TiddlyWiki app pour voir comment il le fait.
Actuellement, les fichiers peuvent être écrits et lus à partir du contexte d’un onglet/d’une fenêtre du navigateur avec les API Fichier , FileWriter , et FileSystem , leur utilisation (voir la fin de cette réponse).
Mais pour répondre à votre question:
Utilisation de 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);
Juste ce que vous avez demandé non? Peut-être peut-être pas. Les deux dernières des API:
- Sont actuellement mis en œuvre uniquement dans les navigateurs à base de chrome (Chrome et Opera)
- Ont été retirés de la liste des normes du W3C et sont désormais des API propriétaires
- Peut être supprimé des navigateurs implémentés à l'avenir
- Limiter la création de fichiers sur un sandbox (un emplacement en dehors duquel les fichiers ne peuvent produire aucun effet) sur le disque
De plus, la spécification FileSystem ne définit aucune directive sur la manière dont les structures de répertoires doivent apparaître sur le disque. Dans les navigateurs basés sur Chromium, par exemple, le bac à sable possède 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 lorsqu’elle est utilisée depuis le navigateur), dans laquelle les répertoires les fichiers créés avec les API sont placés.
Ainsi, bien que vous puissiez peut-être écrire des fichiers sur un système avec les API, localiser les fichiers sans les API (eh bien, sans l'API FileSystem) pourrait être une affaire non triviale.
Si vous pouvez gérer ces problèmes/limitations, ces API sont quasiment le seul moyen natif de faire ce que vous avez demandé.
Si vous êtes ouvert aux solutions non natives, Silverlight autorise également les entrées/sorties de fichiers à partir d’un concours onglet/fenêtre via IsolatedStorage . Cependant, code géré est requis pour utiliser cette fonction; une solution nécessitant l'écriture d'un tel code dépasse le cadre de cette question.
Bien sûr, une solution qui utilise du code managé complémentaire, ne laissant qu’un script pour écrire, est bien dans le champ de cette question;):
//Write file to first of either FileSystem or IsolatedStorage
bakedGoods.set({
data: [{key: "testFile", value: "Hello world!", dataFormat: "text/plain"}],
storageTypes: ["fileSystem", "silverlight"],
options: {fileSystem:{storageType: Window.PERSISTENT}},
complete: function(byStorageTypeStoredItemRangeDataObj, byStorageTypeErrorObj){}
});
* BakedGoods est une bibliothèque Javascript qui établit une interface uniforme qui peut être utilisée pour effectuer des opérations de stockage communes dans toutes les installations de stockage natives et certaines autres. Il est maintenu par ce gars ici:).
Dans le contexte du navigateur, Javascript peut lire le fichier spécifié par l'utilisateur. Voir le blog de Eric Bidelman pour plus de détails sur la lecture de fichier à l'aide de File API . Cependant, il est impossible pour un navigateur JavaScript d'inscrire le système de fichiers d'un ordinateur local sans désactiver certains paramètres de sécurité, car il est considéré menace de sécurité pour tout site Web afin de modifier votre système de fichiers local de manière arbitraire.
Cela dit, il existe différentes façons de contourner le problème, en fonction de ce que vous essayez de faire:
S'il s'agit de votre propre site, vous pouvez incorporer une applet Java dans la page Web. Cependant, le visiteur doit installer Java sur une machine locale et sera averti du risque de sécurité. Le visiteur doit autoriser le chargement de l'applet. Un applet Java est comme un logiciel exécutable ayant un accès complet à l'ordinateur local.
Chrome prend en charge un système de fichiers qui est une partie en sandbox du système de fichiers local. Voir cette page pour plus de détails. Cela vous permet éventuellement de sauvegarder temporairement les choses localement. Cependant, ceci n'est pas supporté par les autres navigateurs.
Si vous n'êtes pas limité au navigateur, Node.js possède une interface de système de fichiers complète. Voir ici pour sa documentation sur le système de fichiers . Notez que Node.js peut s'exécuter non seulement sur les serveurs, mais également sur tout ordinateur client, y compris Windows. Le testeur javascript Karma est basé sur Node.js. Si vous souhaitez simplement programmer en javascript sur l'ordinateur local, c'est une option.
Pour créer un fichier, essayez
function makefile(){
var fso;
var thefile;
fso = new ActiveXObject("Scripting.FileSystemObject");
thefile=fso.CreateTextFile("C:\\tmp\\MyFile.txt",true);
thefile.close()
}
Créez votre répertoire dans le lecteur C, car Windows dispose d'une sécurité contre l'écriture sur le Web Par exemple, créez un dossier nommé "tmp" dans le lecteur C.
Vous devrez vous tourner vers Flash, Java ou Silverlight. Dans le cas de Silverlight, vous examinerez Stockage isolé . Cela vous permettra d'écrire dans des fichiers de votre propre terrain de jeu sur le disque de l'utilisateur. Cependant, il ne vous laissera pas écrire en dehors de votre terrain de jeu.
Vous ne pouvez pas le faire de manière multi-navigateur. IE dispose de méthodes permettant aux applications "de confiance" d'utiliser des objets ActiveX pour lire/écrire des fichiers, mais c'est malheureusement ce qui se passe.
Si vous souhaitez enregistrer les informations utilisateur, vous devrez probablement utiliser des cookies.
A partir d'un test ReactJS, le code suivant écrit avec succès un fichier:
import writeJsonFile from 'write-json-file';
const ans = 42;
writeJsonFile('answer.txt', ans);
const json = {"answer": ans};
writeJsonFile('answer_json.txt', json);
Le fichier est écrit dans le répertoire contenant les tests, donc écrire dans un fichier JSON réel '* .json' crée une boucle!
Vous ne pouvez pas effectuer de fichier d'E/S côté client à l'aide de javascript, ce qui constituerait un risque pour la sécurité. Vous devrez soit leur demander de télécharger et d’exécuter un fichier .exe, ou si le fichier se trouve sur votre serveur, utilisez AJAX et un langage côté serveur tel que PHP pour faire les e/s sur du côté serveur
Il y a deux façons de lire et d'écrire un fichier en utilisant JavaScript
Utiliser les extensions JavaScript
Utilisation d'une page Web et d'objets Active X