Galactic Civilizations 3
Manipuler des dossiers en JavaScript à l'aide d'html 5

Manipuler des dossiers en JavaScript à l'aide d'html 5

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

<<Tutoriel précédent    Tutoriel suivant>>

Description

Dans ce tutoriel, vous apprendrez comment manipuler les dossiers 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 et nécessite la lecture du premier point du tutoriel qui explique comment lire et écrire dans un fichier en JavaScript à l'aide d'html 5.

Créer un dossier

Lorsque le système de fichiers est disponible, nous pouvons créer notre dossier. Pour ce faire, nous allons utiliser la méthode « getDirectory » du dossier racine de notre système de fichier.

Voici un exemple de création de fichier:

function onInitFs(fs){
   fs.root.getDirectory('tutorielsenfolie', {create: true }, function(dirEntry){
      alert(dirEntry.name);
   }, errorHandler);
}

Le deuxième argument de la méthode « getDirectory » est la configuration de notre dossier. Par exemple, « create: true » signifie que l'on crée le fichier s'il n'existe pas.

Comme vous pouvez le voir ci-dessus, « fs.root » permet d'appeler des méthodes sur le dossier racine « / ».

Voici un exemple ou l'on crée plusieurs sous-dossiers:

var path = 'tutoriels/en/folie/';

function createDir(rootDirEntry, folders) {
   // On retire './' et '/'
   if(folders[0] == '.' || folders[0] == '') {
      folders = folders.slice(1);
   }
   rootDirEntry.getDirectory(folders[0], {create: true}, function(dirEntry) {
      // On crée récursivement les sous dossiers.
      if(folders.length) {
         createDir(dirEntry, folders.slice(1));
      }
   }, errorHandler);
};

function onInitFs(fs) {
   // fs.root est de type DirectoryEntry.
   createDir(fs.root, path.split('/'));
}

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

Afficher le contenu d'un dossier

Pour afficher le contenu d'un dossier, nous allons utiliser un objet « DirectoryReader » créé à l'aide de la méthode « createReader ».

Voici un exemple:

function toArray(list) {
   return Array.prototype.slice.call(list || [], 0);
}

function listResults(entries) {
   var content = '';
   entries.forEach(function(entry, i) {
      content += entry.isDirectory?'[dir]':'';
      content+= entry.name+'\n';
   });

   alert(content);
}

function readDirectory (fs) {

   var dirReader = fs.root.createReader();
   var entries = [];

   // On appelle reader.readEntries() tant qu'il y a des éléments dans le dossier.
   var readEntries = function() {
      dirReader.readEntries (function(results) {
         if(!results.length) {
            listResults(entries.sort());
         }else{
            entries = entries.concat(toArray(results));
            readEntries();
         }
      }, errorHandler);
   };
   // On lit le contenu dossier
   readEntries();
}

window.requestFileSystem(window.TEMPORARY, 1024*1024, readDirectory, errorHandler);

Supprimer le dossier

Pour supprimer le dossier à l'aide de l'api html 5, il suffit d'exécuter la méthode JavaScript « remove » de l'objet « DirectoryEntry »:

function onInitFs(fs){
   fs.root.getFile('/tutoriels/en/folie', {}, deleteDirectory, errorHandler);
}
function deleteDirectory(dirEntry){
dirEntry.remove(function(){
      alert('Directory removed.');
   }, errorHandler);
}
window.requestFileSystem(window.TEMPORARY, 1024*1024, onInitFs, errorHandler);

Voici un exemple qui supprime récursivement tous les sous-dossiers et fichier du dossier /tutoriels

window.requestFileSystem(window.TEMPORARY, 1024*1024, function(fs){
   fs.root.getDirectory('/tutoriels', {}, function(dirEntry){
      dirEntry.removeRecursively(function(){
         alert('Directory removed.');
      }, errorHandler);
   }, errorHandler);
}, errorHandler);
 

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

<<Tutoriel précédent    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: créer dossier FileSystem API html HTML5 JavaScript 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