[AJAX] Upload de fichier dans un form, sans valider le form !
Bonjour,
J'ai réussi à écrire un script jquery qui me permet d'uploader une image et l'affiche, sans que la page soit rechargée.
Pour cela j'ai utilisé un form.
Cependant, j'aimerais que l'upload de l'image soit situé lui même dans un formulaire plus général, que l'on validerait avec un button submit.
Le problème c'est que j'ai actuellement pour l'upload un form (validation jquery) qui se valide seul, et ne recharge pas la page, mais il faudrait qu'il soit DANS un form qui lui changera de page et ne s'occupe pas du form d'upload d'image à l'intérieur...
Ce que j'ai actuellement (et qui fonctionne) c'est ça
D'abord le formulaire général :
Code:
1
2
3
4
5
6
7
8
9
|
<form id="Premier">
<input.............../>
<input class="btValiderImg btValidSeul" id="btValiderImg" type="submit" value="Valider"/>
</form>
<form id="up" action="upload_php.php" method="post" enctype="multipart/form-data">
<input id="file" type="file" name="file">
<div id="results"></div>
</form> |
Or j'aimerai mettre l'un dans l'autre. Je ne sais pas si je suis clair.. J'ai regardé un site que je connais qui fais cela bien, (le bon coin) il permet d'ajouter des photos, ça les upload, les montre, puis on peut valider un formulaire global. Mais pour cela ils n'utilisent qu'un seul form.. je ne sais pas comment ils se débrouillent pour faire l'upload du coup..
voilà le code utilisé par le site en question :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <div style="float:left;margin-top:3px;display:none;" id="extra_images_text">
Vous pouvez rajouter <span id="extra_images_num">2</span> photos supplémentaires
</div>
<script type="text/javascript">
<!--
document.write('<' + 'div class="clear"><' + '/div><' + 'input type="button" id="extra_images" onclick="click_extra_images(getElementById(\'loadingOffsetId\'));" value="Ajouter d\'autres photos" />');
//-->
</script>
<noscript>
<div class="clear"></div><input type="submit" name="extra_images" value="Ajouter d'autres photos" />
</noscript>
(optionnel)
<br clear='all' />
<div style="float:left;margin-top:3px;" id="loadingOffsetId"></div> |
Le bouton "Ajouter d'autres photos" est en fait un submit, (alors qu'il existe aussi un submit global..) mais comment rester sur la page.. j'ai du mal à comprendre..
