Php ajax upload previsualisation image avant soumission

**ots2** · 06/10/2010, 20h20

Bjr,

j'ai un formulaire

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**alejandro** · 07/10/2010, 02h25

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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,

**ots2** · 07/10/2010, 11h40

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

**andry.aime** · 07/10/2010, 19h48

Bonjour,

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+.

**ots2** · 10/10/2010, 23h37

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

Adieu !

Php ajax upload previsualisation image avant soumission

Langage PHP

Vue hybride

Discussions similaires

Partager

Partager