Comment faire d'une image, un bouton input file?

Version imprimable

24/02/2017, 17h11
Stev_k

Comment faire d'une image, un bouton input file?

Bonjour,
J'espère poster au bon endroit.
Volia, j'aimerais remplacer le bouton input file (pas très esthétique) par une image (problème vieux comme le web...). Un peu comme le sélecteur d'images du site leboncoin. Si quelqu'un a une idée de la manière de procéder, qu'il n'hésite surtout pas.

Merci.

1 pièce(s) jointe(s)

Il y a peut-être d'autres solutions, mais en voilà une.

L'image c'est le carré rouge.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script language="JavaScript" type="text/javascript">
<!--
function charge() {
  //document.getElementById('toto').value = ""; si tu veux initialiser à chaque fois
  document.getElementById('toto').click();
 document.getElementById('titi').value = document.getElementById('toto').value;
}
//-->
</script>
</head>
<body>
<input type="file" name='toto' id='toto' style="display:none"/>
<input type="text" name='titi' id='titi' size="50"  /><img src="redwood.jpg" alt="" onclick="charge()">
</body>
</html>

Pièce jointe 248169

25/02/2017, 08h54
Stev_k

Bonjour badaze.
Je viens de voir votre message. Merci pour votre contribution, je regarde tous ça et je reviens.
25/02/2017, 19h47
Stev_k

Merci badaze ,je viens de tester et ça marche super!!!
Thank youuuuuu!!!!:D
25/02/2017, 20h16
Stev_k

Help!!!!!!!Je me suis réjouis trop vite :_(
Une fois n'est pas coutume, ça marche impecc sur IE. Malheureusement, su Firefox, il faut cliquer une deuxième fois sur le carré rouge (après la validation de l'image) pour que le champs texte prenne la valeur du nom de l' image.
J'aurais encore besoin de votre aide badaze.

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
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<script language="JavaScript" type="text/javascript">
<!--
function charge() {
  document.getElementById('toto').click();
}
function tutu() {
 i =  document.getElementById('toto');
 i.addEventListener('change',changeValeur,false);
}
function changeValeur() {
 document.getElementById('titi').value = this.value;
}
//-->
</script>
</head>
<body onload="tutu()">
<input type="file" name='toto' id='toto' style="display:none" />
<input type="text" name='titi' id='titi' size="50"  /><img src="redwood.jpg" alt="" onclick="charge()">
</body>
</html>

Comment faire d'une image, un bouton input file

Faut essayer ceci pour voir ce que ça va donner. mais j'ai pas faire du php dedans :

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
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html>
<head>
	<title>input file - image</title>
	<style type="text/css">
                #loadFileImgConteneur{
                        position: relative;
                        width: 100px;
                }
                #loadFileImgConteneur input{
                        position: absolute;
                        top : 0px;
                        left: 0px;
                        right: 0px;
                        bottom: 0px;
                        opacity: 0;
                }
                #loadFileImgConteneur img{
                        width: 100%;
                }
        </style>
</head>
<body>
	<form method="post" action="iframe_traitement">
		<div id="loadFileImgConteneur">
			<img src="adress_image" >
			<input type="submit" name="send_file" id="send_file">
			<input type="file" name="loadFile" id="loadFile">
		</div>
	</form>
	<script type="text/javascript">
                var loadFileInput = document.getElementById('loadFile'),send_file = document.getElementById("send_file");
                loadFileInput.addEventListener("click", function(e){
                        send_file.submit();
                })
        </script>
</body>
</html>

;);););):zoubi::zoubi::zoubi:

25/02/2017, 22h10
Stev_k

Merci à tous les deux. Je vais tester tous ça.
25/02/2017, 23h00
Stev_k

badaze,
maintenant ça ne marche plus du tout. Je veux dire que l'image ne réagi plus au click:(

paoli121,
je ne pense pas que ce soit ce que je cherche. En effet, je ne vois pas de lien entre votre image et le input file. De plus, je suis dans un formulaire avec un input file. Je ne peux donc pas en utiliser un autre.
25/02/2017, 23h11
badaze

1 pièce(s) jointe(s)

Je viens de réessayer sur IE et Firefox et ça fonctionne bien.

Pièce jointe 248374
25/02/2017, 23h19
Stev_k

Okay. L'erreur doit venir de moi alors. Même s'il me semble avoir bien fait mes tests...Je réessayerai demain, en espérant que mon PC s'allumera: l'écran vient de virer au gris, avec une odeur de brûlé:_(
Merci encore, et à demain j'espère.
09/03/2017, 14h23
Stev_k

Après plusieurs jours passés sans PC, je parviens enfin à en trouver un. Je teste le code de badaze et... Ça marche !!! L'erreur venait de moi.
Milles merci! Zêtes un génie !
Merci aussi à Paoli121.
09/03/2017, 14h36
Stev_k

Je ne trouve pas le bouton résolu...

Fuseau horaire GMT +2. Il est actuellement 06h52.

Copyright © 2000-2024 www.developpez.com - Legal informations