[JAVASCRIPT] Manipuler des fichiers sans avoir à les uploader

 

inspecteur-gadget-1999-13-g

 

Salut à tous,

 

Tout d'abord excellente journée !
J'espère que tout va bien chez vous....
Pour ma part, et je dois l'avouer, la grisaille n'est pas très motivante :/

 

Aussi, je vais vous partager une astuce, qui pourra peut-être vous dépanner sur certains de vos projets !

 

Cette astuce consiste à manipuler un fichier directement sur votre page Web, sans avoir à valider un formulaire, faire un traitement PHP ou autres.

 

Rien que du JAVASCRIPT

Car le Javascript c'est l'avenir ;)
Le Javascript ça tourne sur vos serveurs, vos navigateurs, sur des applications mobiles, des systèmes embarqués ...

Bref c'est un langage objet hyper cool et plutôt tendance ;)

L'astuce consiste à créer un champ "file" :

<input type="file" id="fichier"/>

 

On lui attache un événement qui se déclenche lorsque vous chargez un fichier :

document.getElementById('fichier').addEventListener('change', fileTraitement(), false);

Et pour terminer, il faudra créer la fonction qui récupérera le fichier dès que le fichier sera chargé :

function fileTraitement(e){
var reader = new FileReader();
reader.onload = function(event){ 
           //ici vous récupérez le base64 du fichier
          alert(event.target.result); 
}
reader.readAsDataURL(e.target.files[0]);
}

 

 

Vraiment utile, j'ai eu à m'en servir pour modifier en live des images sans avoir à les uploader sur un serveur ;)

 

 

Merci le HTML5

Partagez ce contenu

Laisser une réponse

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *