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

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

JavaScript

Vue hybride

Discussions similaires

Partager

Partager