document.getElementById().click() avec firefox sur un input type file

Version imprimable

Bonjour à tous,

J'essaie de simuler un click sur un input type file avec document.getElementById().click() mais ça ne marche pas sur firefox.

J'ai récupéré une fonction simulateclik, ça ne marche pas sur un input type file
.
Avez vous une idée pour faire marcher ce code sur firefox ?

Voici mon code qui marche bien sur IE 6:

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
39
40
41
42
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<script type="text/javascript">
function getfile(){
	document.getElementById("hiddenfile").click();
    document.getElementById('selectedfile').value=document.getElementById('hiddenfile').value;
	document.getElementById("selectedfile").focus();
 
}
 
function simulateClick() {
  var evt = document.createEvent("MouseEvents");
  evt.initMouseEvent("click", true, true, window,
    0, 0, 0, 0, 0, false, false, false, false, 0, null);
  var cb = document.getElementById("checkbox"); 
  var canceled = !cb.dispatchEvent(evt);
  if(canceled) {
    // A handler called preventDefault
    alert("canceled");
  } else {
    // None of the handlers called preventDefault
    alert("not canceled");
  }
}
 
 
</script>
 
    </head>
 
 
<body>
<input type="file" name="hiddenfile" id="hiddenfile" style="display:none" />
<input type="text" name="selectedfile" id="selectedfile"  />
<input type="image" src="compass.gif" onclick="getfile()"  />
 
</body>
 
</html>

Cdlt

19/08/2010, 18h33
SpaceFrog

ffx n'implémente pas l'appel au click() sur les objets et encore moins sur un input type file pour le mêmes raisons que celles évoquées pas Bovino sur ton autres post.
Si IE et encore plus IE6 est une passoire ... :aie:
19/08/2010, 23h48
blade159

Bonsoir,

une solution serait peut-être de ce rapprocher de Jquery et de la fonction "click()"
20/08/2010, 08h23
Bovino

Citation:

Envoyé par blade159

Bonsoir,

une solution serait peut-être de ce rapprocher de Jquery et de la fonction "click()"

jQuery peut aider à simplifier la syntaxe, mais en aucun cas une bibliothèque quelle qu'elle soit ne peut rendre possible ce qui ne l'est pas en JavaScript.
jQuery, c'est uniquement du JavaScript, elle ne fait pas de miracle ;)
20/08/2010, 09h22
blade159

Tout à fait d'accord, c'était juste une simple piste... ;)

Merci de vos réponse. Donc il n'est pas possible de simuler un click sur firefox sur un input de type file.

Il n'y a pas d'alternative ? J'utilise cette technique uniquement pour remplacer le bouton "parcourir" par une image mais le problème est qu'une fois le fichier sélectionné, il y a un focus sur l'image donc j'ai mis le focus sur le text mais:

Sur IE, le focus passe après le lancement du browser (comportement souhaité)

Sur firefox, le focus est en priorité et le browser ne lance pas.

J'ai essayé d'autre technique comme utilisé du css mais c'est pareil :

Voici le code avec css :

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<title>CSS2/DOM - Styling an input type="file"</title>
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
form.example input {
    background: url('pix/input_boxes.gif') no-repeat 0 -58px;
    border: none;
    width: 241px;
    height: 20px;
    padding-left: 3px;
    padding-top: 3px;
}
 
form.example input:focus {
    background-color: transparent;
}
 
form.example div.fileinputs {
    position: relative;
    height: 30px;
    width: 300px;
}
 
form.example input.file {
    width: 300px;
    margin: 0;
}
 
form.example input.file.hidden {
    position: relative;
    text-align: right;
    -moz-opacity:0 ;
    filter:alpha(opacity: 0);
    opacity: .5;
    z-index: 2;
}
 
form.example div.fakefile {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 350px;
    padding: 0;
    margin: 0;
    z-index: 1;
    line-height: 90%;
}
 
form.example div.fakefile input {
    margin-bottom: 5px;
    margin-left: 0;
}
-->
</style>
<script>
	function getfile(){
 
		alert("ddfdf");
		document.getElementById("test").focus();
	}
</script>	
 
</head>
<body>
<p>Below is a pure CSS solution:</p>
<form action="#" class="example">
  <div class="fileinputs">
    <input type="file" class="file hidden" noscript="true" onclick="getfile()" />
 
    <div class="fakefile">
      <input type="text" id="test"/>
      <img src="search.gif" alt="Browse"  />
 
    </div>
  </div>
</form>
 
</body>
</html>

Avez vous des idées ?

Cdlt,