Télécharger une photo et l'afficher directement

Bonjour,

sur une page j'ai un champ de formulaire qui permet à l'utilisateur de télécharger une photo depuis son ordinateur.

- une popup s'ouvre et permet de choisir une photo.


le problème est que lorsque l'utilisateur fermer la popup, (seulement) le nom du fichier est rempli dans le champ du formulaire de la fenêtre appelante et il a besoin de cliquer sur envoyer le formulaire pour que la photo soit télécharger.

J'aimerai que la photo soit directement télécharger à la fermeture de la popup ainsi je pourrai directement l'afficher sur la page appelante.

merci d'avance pour vos réponses!

Avant de demander des choses comme ça, il faut d'abord se demander comment ce serait possible techniquement, comment ça pourrait fonctionner et quelles seraient les conséquences si c'était possible.

Donc, comment ce serait possible techniquement.
Pour qu'une image s'affiche sur une page, il faut une balise image dont l'attribut src pointe sur une ressource renvoyant une image.
Or, tu veux afficher l'image avant qu'elle ne soit transférée sur le serveur et comme une image ne se téléporte pas par magie sur un serveur, le seul moyen serait d'affecter à la balise image une source pointant vers ton système de fichier.

Comment ça pourrait fonctionner.
A la modification du champ file, tu récupères sa valeur et tu affectes l'attribut src avec cette valeur.

Quelles seraient les conséquences.
Cela signifierait que n'importe quel site est capable d'accéder à ton système de fichier et d'en récupérer des fichiers. Je rappelle que si c'est l'utilisateur qui choisit le fichier dans le champ file, pour la suite (affectation à une balise image d'un attribut src provenant du système de fichier local), il n'est au courant de rien, donc en gros, il serait possible de scanner les fichiers du visiteur à son insu...
Pour des raisons diverses, Google, la NSA, n'importe quel pirate en rêveraient, mais ce n'est heureusement pas possible !
C'est d'ailleurs pour ça que la valeur d'un champ file ne fait jamais apparaitre le chemin du fichier sélectionné (je parle des navigateurs dignes de ce nom bien sûr).

Bref, techniquement, ce que tu demandes n'est pas possible pour des raisons élémentaires de sécurité et c'est pour ça que jusqu'à peu, cette fonctionnalité n'existait nulle part sauf les sites en Flash éventuellement.

Mais...
Heureusement pour toi, HTML5 apporte comme souvent une solution efficace.
Renseigne-toi donc sur l'API FileReader et notamment la méthode readAsDataURL() qui peuvent répondre à ton attente.