[JAVASCRIPT] Manipuler des fichiers sans avoir à les uploader

Publié le 19 novembre 2015 par #Ro0t

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 » :

[pastacode lang= »markup » message= » » highlight= » » provider= »manual »]

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

[/pastacode]

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

[pastacode lang= »javascript » message= » » highlight= » » provider= »manual »]

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

[/pastacode]

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

[pastacode lang= »javascript » message= » » highlight= » » provider= »manual »]

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]);
}

[/pastacode]

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

Merci le HTML5