Action automatique sur click d'un bouton de formulaire [Résolu]

[ned-flanders]

Bonjour,

je souhaite permettre à mes visiteurs d'envoyer des vidéos (<20mo a cause des limites de mon hebergeur mutualisé).
Voici le code:

Code :

1
2
3
4
5
6
echo "<form enctype='multipart/form-data' action='index.php?x=upload' method='post'>";
echo "<input type='hidden' name='MAX_FILE_SIZE' value='20000000' />";
echo "<div>Attention votre vidéo doit peser <u>moins de 20 mo</u>!</div>";
echo "<br><div><input type='file' name='video'></div>";
echo "<input type='submit' name='envoi' value='Envoyer' />";
echo "</form>";

Le problème est que le temps d'upload de la vidéo peut etre long, et pour faire patienter l'utilisateur sur la page et lui faire comprendre que sa requete a été prise en compte, j'aimerais que lorsqu'il appuie sur le bouton d'envoi, un texte (ex: "patientez svp...") s'affiche juste en dessous.

Quelqu'un connait-il une technique pour faire cela (un attribut de la balise input de type 'submit'?)

D'avance merci pour votre aide!!!

[Yogui]

Salut

Tu seras confronté à un problème : la limite imposée par PHP pour les uploads de fichiers (différente de celle de ton formulaire). Tu trouveras des infos à ce sujet dans mes tutoriels

Sinon, pour te répondre, il faut utiliser la manipulation DOM avec JavaScript. Utilise l'évènement onsubmit de ton formulaire pour ajouter une image, par exemple.

[ned-flanders]

Salut Yoqui, merci pour ta réponse!

En ce qui concerne la limite imposée par php, il s'agit de 20mo (jai regardé le php.ini)

Sinon pour l'attribut onsubmit je n'ai trouvé que des choses pour les boutons radio, dur dur...

je vais continuer les recherches

[Yogui]

Ce n'est pas standard mais ça fonctionne à tous les coups et c'est plus simple : innerHTML() en JavaScript.

[sylvanillo]

Tant que le browser processe l'upload (=envoie le filestream vers le serveur) il ne reçoit pas de code HTML donc tu ne peux pas inclure un code d'attente dans le script qui traite l'upload.

Donc il te suffit par exemple:
- d'inclure le formulaire dans un DIV avec id='formDIV'
- d'ajouter un DIV avec style='display:none;' et id='msgDIV' qui comprend un message "L'upload est en cours.... veuillez patienter"

Mettre un bouton avec type='button' et onclick="javascript:submitMyForm()"

Dans le header de la page:

Code :

1
2
3
4
5
function submitMyForm() {
   document.getElementById('formDIV').style.display = 'none';
   document.getElementById('msgDIV').style.display = 'none';
   document.myForm.submit();
}

Ca te permet par ailleurs d'éviter que l'utilisateur clique une nouvelle fois sur le bouton.

[ned-flanders]

Ca a l'air d'etre exactement ce qu'il me faut sylvanillo!!

mais si j'ai bien compris, c'est plutot:

Code :

1
2
3
4
 
....
document.getElementById('msgDIV').style.display = 'block';
...

qu'il faudrait mettre dans la fonction pour que message s'affiche non?
En tout cas Merci beaucoup je vais mettre ca en place!!

[ned-flanders]

Excellent!!
C'est parfait, ca marche!
Merci beaucoup!!!

[sylvanillo]

Oui je m'excuse, c'était :
document.getElementById('msgDIV').style.display = '' ou 'inline' etc