Php ajax upload previsualisation image avant soumission

Version imprimable

Bjr,

j'ai un formulaire
Code:

1 2 3 4 5 <form id="Form1" name="Form1" method="post" action="suite.php"> <input type="text" name="nom" /> <input type="text" name="prenom" /> ...
j'aimerais que l'utilisateur puisse aller chercher une image sur son ordi MAIS que cette image s'affiche en miniature dans son formulaire AVANT de soumettre la totalité du formulaire à mon traitement suite.php
Code:

1 2 3 4 5 6 7 8 9 10 11 12 ... Select an image from your hard disk: <input type="hidden" name="MAX_FILE_SIZE" value="500" /> <input type="file" name="fileToUpload" id="fileToUpload" /> <button type="button" onclick="JavaScript: fonction('uploadimage')">upload</button> ... <input type="Submit" value="Submit" id="buttonForm" /> </form>
J'ose espèrer que ma demande est explicite

Merci de me faire parvenir dans la mesure du possible toute infos qui me permettront de résoudre ce cauchemar !

cordialement
Olivier

Bonjour,

Lorsque tu cliques sur "Parcourir ..." et que tu sélectionne ton image, normalement le chemin d'accès à cette image est intégré à ton champ input.

Tu n'a qu'a lancer une fonction lorsque la valeur de cet input change et générer une image de manière dynamique en javascript et l'intégrer dans un conteneur :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 <html> <head> <script type="text/javascript"> function show_image() { var mypath = document.getElementById('myinput').value; var html = '<img src="'+mypath+'" />'; document.getElementById('container').innerHTML = html; } </script> </head> <body> <input type="file" name="myfile" id="myinput" onchange="show_image();" /> <div id="container"></div> </body> </html>
Chez moi ça marche correctement.

Amicalement,

07/10/2010, 11h40
Invité

merci pour ta réponse Alejandro,
mais j'aurais préféré appeler( un script PHP ? ? ? ) ou quelque chose dans le genre afin de vérifier que l'image soit au bon format, qu'elle n'excède pas un certain poids qu'elle ne soit pas vérolée et ensuite l'afficher en miniature sur le formulaire.

ce qui reviendrait presque il me semble a faire une sorte de formulaire dans un formulaire :?

on peut voir le type de réalisation que j'aimerais obtenir quand on met des images dans un formulaire de petite annonce de vente d'un objet sur le site E b a y
07/10/2010, 19h48
andry.aime

Bonjour,

Citation:

Tu n'a qu'a lancer une fonction lorsque la valeur de cet input change et générer une image de manière dynamique en javascript et l'intégrer dans un conteneur :

ça ne marche que sous les anciens version de IE, en fait c'est du à une question de sécurité. La meilleure façon c'est d'uploader le fichier sur le serveur via un iframe caché, et modifier ensuite le chemin du src de l'image par rapport au chemin de fichier sur le serveur. Sinon, tu peux voir du coté flash ou applet.

A+.
10/10/2010, 23h37
Invité

suite et fin

Ok !
ce sera donc un formulaire dans un iframe lui même dans un formulaire

Adieu !