Galactic Civilizations 3
Lire, écrire et supprimer des fichiers en JavaScript à l'aide d'html 5

Lire, écrire et supprimer des fichiers en JavaScript à l'aide d'html 5

Catégorie: Javascript.
Posté par le 08/04/2014.
Dernière mise à jour le 16/04/2014.

   Tutoriel suivant>>

Description

Dans ce tutoriel, vous apprendrez comment lire, écrire et supprimer des fichiers en JavaScript en utilisant le FileSystem API disponible en html 5.

Introduction

Ce tutoriel peut être réalisé à l'aide d'un simple éditeur de texte. Il nécessite des connaissances de base en en JavaScript.

NB: Actuellement, seul Google Chrome supporte le FileSystem API d'HTML5.

Créer un système de fichier

Avant de pouvoir créer, modifier ou accéder à des fichiers stockés en local en JavaScript, nous devons avoir accès à un système de fichier. Pour ce faire nous allons utiliser la méthode « requestFileSystem ». Plusieurs arguments peuvent être utilisés afin de personnaliser notre système de fichier:

  • type: définit si le stockage est persistant (window.PERSISTENT) ou temporaire (window.TEMPORARY);
  • size:définit la taille de l'espace de stockage en bytes;
  • successCallback: fonction appelée lorsque le système de fichier est disponible;
  • opt_errorCallback: fonction appelée s'il y a une erreur lors de l'initialisation du système de fichier;

NB: le système de fichier est placé dans une sandbox, c'est à dire que l'on peut avoir accès qu'aux fichiers créés par l'application JavaScript.

NB: la permission de l'utilisateur est requise lorsque l'on essaye de créer un système de fichier persistant.

Voici un exemple:

function onInitFs(fs) {
   alert('Systeme de fichier: ' + fs.name);
}

function errorHandler(e) {
   var msg = '';
   switch (e.code) {
      case FileError.QUOTA_EXCEEDED_ERR:
         msg = 'QUOTA_EXCEEDED_ERR';
         break;
      case FileError.NOT_FOUND_ERR:
         msg = 'NOT_FOUND_ERR';
         break;
      case FileError.SECURITY_ERR:
         msg = 'SECURITY_ERR';
         break;
      case FileError.INVALID_MODIFICATION_ERR:
         msg = 'INVALID_MODIFICATION_ERR';
         break;
      case FileError.INVALID_STATE_ERR:
         msg = 'INVALID_STATE_ERR';
         break;
      default:
         msg = 'Unknown Error';
         break;
   };
   alert('Error: ' + msg);
}

window.requestFileSystem  = window.requestFileSystem || window.webkitRequestFileSystem;
window.requestFileSystem(window.TEMPORARY, 1*1024*1024 /*1MB*/, onInitFs, errorHandler);

Créer le fichier

Lorsque le système de fichiers est disponible, nous pouvons créer notre premier fichier. Pour ce faire, nous allons utiliser la méthode « getFile » du dossier racine de notre système de fichier.
Voici un exemple de création de fichier:

function onInitFs(fs) {
   fs.root.getFile('tutorielsenfolie.txt', {create: true, exclusive: true}, function(fileEntry) {
      alert(fileEntry.name);
   }, errorHandler);
}

Le deuxième argument de la méthode « getFile » est la configuration de notre fichier. Par exemple, « create: true » signifie que l'on crée le fichier s'il n'existe pas et « exclusive: true »  signifie qu'une erreur est envoyée si le fichier existe.
Comme vous pouvez le voir ci-dessus, « fs.root » permet d'appeler des méthodes sur le dossier racine « / ».

Ouvrir et lire le fichier

Comme pour la création de fichier, la méthode « getFile » doit être appelée.

Cette méthode appelle une fonction prend en argument le nom du fichier, la configuration (vide), le nom de la méthode exécutée en cas de succès et le nom de la méthode exécutée en cas d'erreur.

function onInitFs(fs) {
   fs.root.getFile('tutorielsenfolie.txt', {}, readFile, errorHandler);
}
function readFile(fileEntry) {
   // On récupère l'objet File qui représente le fichier,
   // Ensuite on utilise FileReader pour le lire.

   fileEntry.file(function(file) {
      var reader = new FileReader();
      reader.onloadend = function(e) {
         alert(this.result);
      };
      reader.readAsText(file);
   }, errorHandler);
}

window.requestFileSystem  = window.requestFileSystem || window.webkitRequestFileSystem;
window.requestFileSystem(window.TEMPORARY, 1024*1024, onInitFs, errorHandler);

Comme vous pouvez le voir ci-dessus, la méthode « readFile » reçoit un objet de type FileEntry. Cet objet représente le fichier à lire. Nous utilisons ensuite un FileReader afin de lire le contenu de ce fichier.

Ecrire dans le fichier

Je vais maintenant vous expliquer comment écrire dans un fichier en JavaScript à l'aide de l'HTML5. Pour ce faire nous allons utiliser l'objet FileWriter:

function onInitFs(fs) {
   fs.root.getFile('tutorielsenfolie.txt', {create: true}, writeFile, errorHandler);
}
function writeFile(fileEntry) {
   fileEntry.createWriter(function(fileWriter) {
      fileWriter.onwriteend = function(e) {
         alert('OK.');
      };
      fileWriter.onerror = function(e) {
         alert('Error: ' + e.toString());
      };
      // On crée un objet Blob pour écrire dans le fichier.
      var data = new Blob(['Tutoriels en folie'], {type: 'text/plain'});
      fileWriter.write(data);
   }, errorHandler);
}

window.requestFileSystem  = window.requestFileSystem || window.webkitRequestFileSystem;
window.requestFileSystem(window.TEMPORARY, 1024*1024, onInitFs, errorHandler);

La configuration {create: true} permet de créer le fichier si celui-ci n'existe pas.

Dans l'exemple ci-dessus nous remplaçons l'entièreté du contenu du fichier. Voici un exemple ou l'on ajoute les données à la fin du fichier:

function onInitFs(fs) {
   fs.root.getFile('tutorielsenfolie.txt', {create: true}, writeFile, errorHandler);
}
function writeFile(fileEntry) {
   fileEntry.createWriter(function(fileWriter) {
      // On commence à la fin du fichier.
      fileWriter.seek(fileWriter.length);
      // On crée un objet Blob pour écrire dans le fichier.
      var data = new Blob(['Tutoriels en folie'], {type: 'text/plain'});
      fileWriter.write(data);
   }, errorHandler);
}

window.requestFileSystem  = window.requestFileSystem || window.webkitRequestFileSystem;
window.requestFileSystem(window.TEMPORARY, 1024*1024, onInitFs, errorHandler);

Supprimer le fichier

Pour supprimer le fichier à l'aide de l'api HTML5, il suffit d'exécuter la méthode JavaScript « remove » de l'objet FileEntry:

function onInitFs(fs) {
   fs.root.getFile('tutorielsenfolie.txt', {create: false}, deleteFile, errorHandler);
}
function deleteFile(fileEntry) {
   fileEntry.remove(function() {
      alert('OK');
   }, errorHandler);
}

window.requestFileSystem  = window.requestFileSystem || window.webkitRequestFileSystem;
window.requestFileSystem(window.TEMPORARY, 1024*1024, onInitFs, errorHandler);

Trois autres tutoriels peuvent vous inéresser:

Tu as aimé ce tutoriel ?
Aide nous à améliorer le site ! Deviens partenaire officiel ou suis nous sur facebook !

   Tutoriel suivant>>

Commentaires[0]

Tu as aimé ce tutoriel ? Alors partage-le avec tes amis !
Partager sur Facebook Partager sur Twitter Partager sur Myspace Partager sur Stumbleupon Soumettre sur Reddit Partager sur Digg Ajouter à vos favoris Technorati Ajouter à vos favoris Live Ajouter à vos favoris Google Ajouter sur vos favoris Yahoo Voir le flux rss

Mots Clés: ecrire dans un fichier fichier FileSystem API html HTML5 JavaScript lire un fichier web

Veve :
(11/04/2013 - 17:19:44)
il faut juste mettre "sudo" à la place de "su" pour exécuter la commande en root

Veve :
(11/04/2013 - 17:18:56)
Salut tu peux aller lire ce tutoriel: http://www.tutorielsenfolie.com/tutoriels-63-installation-configuration-opennebula.html Il fonctionne aussi sous ubuntu

safa.souissi4 :
(10/04/2013 - 20:58:13)
s'il vous plait c urgent :(

safa.souissi4 :
(10/04/2013 - 20:56:25)
bonsoir,je cherche un tutos pour installer opennebula.org sous ubuntu 12.

Veve :
(18/03/2013 - 20:07:49)
oui, j'essaye de voir d'ou viens le problème.

sonde :
(18/03/2013 - 13:29:57)
re merci (j apprend un peu plus) je crois que j ai trouver pourquoi je peu pas poster si il y a ligne code impossible de poster lol

Veve :
(17/03/2013 - 21:34:49)
Salut, j'espère que ça t'a aidé.

sonde :
(17/03/2013 - 09:59:02)
pour ton aide

sonde :
(17/03/2013 - 09:57:36)
slt Veve impossible de laisser com

sonde :
(17/03/2013 - 09:56:55)
??

Demi-dieu :
(15/03/2013 - 18:41:13)
salut ^^

sonde :
(13/03/2013 - 14:49:35)
un petit coucou

Tanamoureuse :
(29/09/2011 - 06:11:08)
Je t'aime

Faire un don

Ma Publicité ici


Faire un don