Galactic Civilizations 3
Afficher des images ou des documents enregistrés en local en JavaScript et html5

Afficher des images ou des documents enregistrés en local en JavaScript et html5

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

<<Tutoriel précédent 

Description

Dans ce tutoriel, vous apprendrez comment afficher des images ou documents enregistrés en local 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 et/ou la lecture du tutoriel qui explique comment manipuler des dossiers en JavaScript à l'aide d'html 5.

Créer le système de fichier local

Afin d'apprendre comment créer le système de fichier en JavaScript, je vous propose de lire premier point du tutoriel qui explique comment lire et écrire dans un fichier en JavaScript à l'aide d'html 5.

Ajouter l'image

Lorsque le système de fichiers est disponible, nous pouvons créer notre image. Pour ce faire, nous allons utiliser la méthode « getFile » du dossier racine de notre système de fichier et la méthode « write » de l'objet « FileWriter »:

<input type="file" id="myfile" multiple />

Voici un exemple ou on enregistre tous nos fichiers dans notre système de fichier local:

document.querySelector('#myfile').onchange = function(e) {
  var files = this.files;

  window.requestFileSystem(window.TEMPORARY, 1024*1024, function(fs){
  // On copie tous les fichiers sélectionné dans notre système de fichier local.
    for (var i = 0, file; file = files[i]; ++i){
      // On crée le fichier
      (function(f) {
        fs.root.getFile(f.name, {create: true, exclusive: true}, function(fileEntry) {
          fileEntry.createWriter(function(fileWriter) {
          // NB: write() peux prendre un objet de type File ou Blob.
            fileWriter.write(f);
          }, errorHandler);
        }, errorHandler);
      })(file);
    }
  }, errorHandler);
};

Afficher l'image

Pour récupérer l'url de l'image dans le système de fichier local, nous allons utiliser la méthode « toURL » de l'objet « FileEntry »:

var img = document.createElement('img');
// filesystem:http://tutorielsenfolie.com/temporary/html5.png
img.src = fileEntry.toURL();
document.body.appendChild(img);

Si vous connaissez déjà le lien vers vos images interne, vous pouvez récupérer l'objet FileEntry correspondant afin de manipuler le fichier:

window.resolveLocalFileSystemURL = window.resolveLocalFileSystemURL ||window.webkitResolveLocalFileSystemURL;

var url = 'filesystem:http://example.com/temporary/myfile.png';
window.resolveLocalFileSystemURL(url, function(fileEntry) {
  ...
});

Vous pouvez par exemple déplacer, renommer ou copier ce fichier dans un autre répertoire.

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

<<Tutoriel précédent 

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: FileSystem API html HTML5 image 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