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?

Par souci d'exhaustivité, l'OP n'indique pas qu'il cherche à le faire dans un navigateur (s'il le fait, comme cela a été dit, ce n'est généralement pas possible)

Cependant, javascript en soi le permet; cela peut être fait avec du javascript côté serveur.

Voir cette documentation sur la classe Javascript File

Edit : Ce lien était vers les documents Sun qui ont maintenant été déplacés par Oracle.

Pour suivre l'actualité, voici la documentation node.js pour la classe FileSystem: http://nodejs.org/docs/latest/api/fs.html

Edit (2) : Vous pouvez maintenant lire les fichiers côté client avec HTML5: http://www.html5rocks.com/en/tutorials/file/dndfiles/

Non. Le javascript côté navigateur n'a pas l'autorisation d'écrire sur la machine client sans que de nombreuses options de sécurité ne soient désactivées

L'avenir est là! Les propositions sont plus proches de la fin, plus d'ActiveX ou de flash ou de java. Maintenant, nous pouvons utiliser:

• API de système de fichiers

• Accès aux fichiers natif par glisser-déposer

Vous pouvez utiliser le glisser / déposer pour obtenir 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/en/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 fichiers 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 à partir 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é.

Modifier: Le code suivant ne fonctionne qu'avec le navigateur IE puisque 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;
}

Appelez la fonction:

save_content_to_file("Hello", "C:\\test");

Si vous utilisez JScript (Javascript de Microsoft) pour faire des scripts locaux à l'aide de WSH (PAS dans un navigateur!), Vous pouvez utiliser Scripting.FileSystemObjectpour accéder au système de fichiers.

Je pense que vous pouvez accéder à ce 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.

MSDN ici

Actuellement, les fichiers peuvent être écrits et lus à partir du contexte d'un onglet / fenêtre de navigateur avec les API File , FileWriter et FileSystem , bien qu'il y ait des mises en garde à 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 API:

• Sont actuellement implémentés uniquement dans les navigateurs basés sur Chromium (Chrome et Opera)
• Ont été retirées de la piste des normes du W3C et sont désormais des API propriétaires
• Peut être supprimé des navigateurs de mise en œuvre à l'avenir
• Limiter la création de fichiers à un bac à sable (un emplacement en dehors duquel les fichiers ne peuvent produire aucun effet) sur le disque

En outre, la spécification FileSystem ne définit aucune directive sur la façon dont les structures de répertoire doivent apparaître sur le disque. Dans les navigateurs basés sur Chromium, par exemple, le bac à sable dispose d'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 lorsqu'elle est accessible depuis le navigateur), dans lequel les répertoires et les fichiers créés avec le Les API sont placées.

Donc, bien que vous puissiez écrire des fichiers sur un système avec les API, localiser les fichiers sans les API (enfin, sans l'API FileSystem) pourrait être une affaire non triviale.

Si vous pouvez gérer ces problèmes / limitations, ces API sont à peu près le seul moyen natif de faire ce que vous avez demandé.

Si vous êtes ouvert aux solutions non natives, Silverlight permet également les entrées / sorties de fichiers à partir d'un concours d'onglets / fenêtres via IsolatedStorage . Cependant, le code managé est nécessaire pour utiliser cette fonction; une solution qui nécessite l'écriture d'un tel code sort du cadre de cette question.

Bien sûr, une solution qui utilise du code managé complémentaire, ne laissant que du Javascript à écrire, entre bien dans le cadre 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 non natives. Il est maintenu par ce gars ici :).

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 l' application TiddlyWiki pour voir comment cela fonctionne.

Dans le contexte du navigateur, Javascript peut LIRE le fichier spécifié par l'utilisateur. Voir le blog d'Eric Bidelman pour plus de détails sur la lecture de fichiers à l'aide de File API. Cependant, il n'est pas possible pour le Javascript basé sur un navigateur d'écrire le système de fichiers de l'ordinateur local sans désactiver certains paramètres de sécurité, car il est considéré comme une menace pour la sécurité de tout site Web de modifier arbitrairement votre système de fichiers local.

Cela dit, il existe des moyens de contourner ce problème en fonction de ce que vous essayez de faire:

1. S'il s'agit de votre propre site, vous pouvez intégrer une applet Java dans la page Web. Cependant, le visiteur doit installer Java sur la machine locale et sera alerté du risque de sécurité. Le visiteur doit autoriser le chargement de l'applet. Une applet Java est comme un logiciel exécutable qui a un accès complet à l'ordinateur local.

2. Chrome prend en charge un système de fichiers qui est une partie en bac à sable du système de fichiers local. Consultez cette page pour plus de détails. Cela vous permet éventuellement de sauvegarder temporairement des choses localement. Cependant, cela n'est pas pris en charge par les autres navigateurs.

3. Si vous n'êtes pas limité au navigateur, Node.js dispose d'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 fonctionner non seulement sur les serveurs, mais également sur tout ordinateur client, y compris Windows. Le lanceur de test 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 a une sécurité contre l'écriture à partir du 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 vous intéresserez au stockage isolé . Cela vous permettra d'écrire dans des fichiers de votre propre terrain de jeu sur le disque des utilisateurs. Cela ne vous permettra pas d'écrire en dehors de votre terrain de jeu.

Vous ne pouvez pas faire cela de manière cross-browser. IE a des méthodes pour permettre aux applications «de confiance» d'utiliser des objets ActiveX pour lire / écrire des fichiers, mais c'est malheureusement tout.

Si vous cherchez à enregistrer des informations utilisateur, vous devrez probablement utiliser des cookies.

À 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 l'écriture dans un fichier JSON réel '* .json' crée une boucle!

Vous ne pouvez pas effectuer d'entrées / sorties de fichiers côté client à l'aide de javascript car cela constituerait un risque pour la sécurité. Vous devrez soit les faire télécharger et exécuter un exe, soit si le fichier est sur votre serveur, utiliser AJAX et un langage côté serveur tel que PHP pour faire les entrées / sorties côté serveur

Il existe deux façons de lire et d'écrire un fichier à l'aide de JavaScript

1. Utiliser les extensions JavaScript

2. Utilisation d'une page Web et d'objets Active X

Rédaction de cette réponse pour les personnes qui souhaitent télécharger un fichier avec un contenu spécifique à partir de javascript. Je luttais avec la même chose.

const data = {name: 'Ronn', age: 27};              //sample json
const a = document.createElement('a');
const blob = new Blob([JSON.stringify(data)]);
a.href = URL.createObjectURL(blob);
a.download = 'sample-profile';                     //filename to download
a.click();

Consultez la documentation Blob ici - Blob MDN

Voici une solution d'écriture pour chrome v52 + (l'utilisateur doit toujours sélectionner une biche de destination ...)
source: StreamSaver.js

<!-- load StreamSaver.js before streams polyfill to detect support -->
<script src="StreamSaver.js"></script>
<script src="https://wzrd.in/standalone/web-streams-polyfill@latest"></script>

const writeStream = streamSaver.createWriteStream('filename.txt')
const encoder = new TextEncoder
let data = 'a'.repeat(1024)
let uint8array = encoder.encode(data + "\n\n")

writeStream.write(uint8array) // must be uInt8array
writeStream.close()

Idéal pour l'écriture de données volumineuses générées côté client.
Sinon, je suggère d'utiliser FileSaver.js pour enregistrer Blob / Files