Discussion :

[valmeras]

Bonjour,

J'ai un formulaire d'upload de fichiers et j'aimerais placer le gif animé devant le bouton "Envoyer" mais je ne sais pas comment m'y prendre. Côté css, je suis nul.

Voici le code mon formulaire :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<form action="" method="post" enctype="multipart/form-data" id="form">
    <p><input type="file" name="files[]" multiple="multiple" accept="application/pdf"/></p>
    <p><input type="submit" id="upload" value="Envoyer"/></p>
	<div id="loading2" style="display:none;"><img src="loading.gif" alt="" /></div>
 
	<script type="text/javascript">
(function (d) {
  d.getElementById('form').onsubmit = function () {
    d.getElementById('upload').style.display = 'none';
    d.getElementById('loading2').style.display = 'block';
  };
}(document));
</script>

Merci

[Crackerz]

Bonjour,

Il ne s'agit pas d'un problème qui touche le JavaScript mais comme vous le précisez du CSS (voir de la structure HTML).

Un div est de type block, deux éléments de type block ne reste pas sur la même ligne par défaut, c'est là que le CSS intervient...

En reprenant votre code :

Code html :

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

1
2
3
4
<form action="" method="post" enctype="multipart/form-data" id="form">
<p><input type="file" name="files[]" multiple="multiple" accept="application/pdf"/></p>
<p><input type="submit" id="upload" value="Envoyer"/></p>
<div id="loading2" style="display:none;"><img src="loading.gif" alt="" /></div>

On modifie le style du div comportant l'image que vous désirez placer avant le bouton envoyé :

Code html :

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

1
2
3
 <p><input type="file" name="files[]" multiple="multiple" accept="application/pdf"/></p>
<div id="loading2" style="display:inline; "><img src="loading.gif" alt="" /></div>
<input type="submit" id="upload" value="Envoyer" style=""/>