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

**Stev_k** · 24/02/2017, 17h11

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.

**badaze** · 24/02/2017, 19h37

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

L'image c'est le carré rouge.

Code html :

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
<!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>

Nom : 20170224-002.jpg
Affichages : 1024
Taille : 111,7 Ko

**Stev_k** · 25/02/2017, 08h54

Bonjour badaze.
Je viens de voir votre message. Merci pour votre contribution, je regarde tous ça et je reviens.

**Stev_k** · 25/02/2017, 19h47

Merci badaze ,je viens de tester et ça marche super!!!
Thank youuuuuu!!!!

**Stev_k** · 25/02/2017, 20h16

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.

**badaze** · 25/02/2017, 21h12

Code html :

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
<!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>

**paoli121** · 25/02/2017, 22h02

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

Code html :

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

**Stev_k** · 25/02/2017, 22h10

Merci à tous les deux. Je vais tester tous ça.

**Stev_k** · 25/02/2017, 23h00

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.

**badaze** · 25/02/2017, 23h11

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

Nom : 20170225-010.jpg
Affichages : 947
Taille : 85,4 Ko

**Stev_k** · 25/02/2017, 23h19

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.

**Stev_k** · 09/03/2017, 14h23

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.

**Stev_k** · 09/03/2017, 14h36

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

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

JavaScript

Discussions similaires

Partager

Partager