input de type file bug

**boboss123** · 15/04/2013, 10h23

Bonjour,

Voici le code source de ma page Web :

Code :

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
39
40
41
42
43
44
45
46
47
48
 
<!DOCTYPE HTML>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title>Test</title>
 
	<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
    <link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css"> -->
 
	<!-- <link rel="stylesheet" href="bootstrap/css/bootstrap.css"> -->
	<!-- <link rel="stylesheet" href="bootstrap/css/bootstrap-responsive.css"> -->
</head>
 
<body>
	<form class="well" action="upload.cgi" target="iframecfg" method="post" enctype="multipart/form-data">
		<fieldset>
			<legend>Upload fichier</legend>
 
			<div class="input-append">
				<input class="hide" type="file" name="configFile_fileBox" id="configFile_fileBox"/>  
 
				<input class="span2" id="configFile_fileBox_textBox" type="text">
				<button id="configFile_fileBox_button" class="btn" type="button">Parcourir...</button>
			</div>
 
			<div class="input-append">
				<button type="submit" class="btn btn-primary">Envoyer</button>
			</div>
		</fieldset>
	</form>
 
	<script src="http://twitter.github.com/bootstrap/assets/js/jquery.js"></script>
	<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js"></script>
 
	<!-- <script src="jquery/jquery-1.9.1.js"></script> -->
	<!-- <script src="bootstrap/js/bootstrap.js"></script> -->
 
	<script type="text/javascript">
	$("#configFile_fileBox_button").click(function(){
		$("#configFile_fileBox").click();
	});
	$("#configFile_fileBox").change(function(){
		$("#configFile_fileBox_textBox").val($(this).val());
	});
	</script>
</body>
</html>

Lorsque je clic sur le bouton "Parcourir...", la fenêtre de sélection de fichier s'ouvre sur tous les navigateurs sauf sous opéra : y a t-il une solution pour que ça fonctionne aussi sous opéra 12.15 ?

Pour la partie javascript, j'utilise jQuery mais je ne pense pas que le problème vienne de l'utilisation de ce framework.

merci d'avance,

**boboss123** · 15/04/2013, 11h09

Si je ne mets pas classe "hide" à l'input de type file, ça fonctionne : mais que faire alors de cet élément pour qu'il n'apparaisse pas sur la page ?

J'ai trouvé un site avec un système qui marche sous opéra mais je n'arrive pas à voir comment il fait :
http://jasny.github.io/bootstrap/jav...tml#fileupload

En faisant ça, ça a l'air de fonctionner mais je ne suis pas sure à 100% que ça soit la meilleure méthode :

Code :

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

1
2
 
<input type="file" style="visibility:hidden;width:0;height:0;margin:0;padding:0;border:none;" name="configFile_fileBox" id="configFile_fileBox"/>

**mainContainer** · 15/04/2013, 14h13

Avec la classe hide de bootstrap (display:none) cela va également poser un problème sur IE8 et safari.

La solution consiste à laisser l'élément visible mais de le sortir du viewport:

Une des solutions possible:

Code css :

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

1
2
3
4
#myFileInput{
position: absolute;
top: -200px;
}

car le problème de visibility:hidden, est que l'élément reste en place dans la page, ce qui peut poser des problèmes d'affichage.

**boboss123** · 15/04/2013, 15h22

ok, merci, je vais partir sur cette solution alors

**NoSmoking** · 15/04/2013, 18h28

Bonjour,
tu peux également jouer sur la propriété opacity comme dans l'exemple que tu indiques.

**boboss123** · 16/04/2013, 09h11

oki

=> vous arrivez à voir quelle méthode est utilisée dans le lien cité précédemment ?

**boboss123** · 17/04/2013, 13h42

J'ai un problème : sous IE8, le fichier n'est pas envoyé (a priori c'est une protection pour ne pas que des fichiers soient envoyés sans l'approbation de l'utilisateur)

**thelvin** · 17/04/2013, 15h52

Envoyé par boboss123

=> vous arrivez à voir quelle méthode est utilisée dans le lien cité précédemment ?

Ben oui, l'opacité zéro. C'est la technique habituelle.
En principe, un élément en display: none n'existe juste pas, et un élément en visibility: hidden est transparent aux évènements du pointeur (souris ou touch) et ne déclenchera donc pas la pop-up de sélection de fichier.

Reste l'opacité zéro, fonctionne comme une opacité partielle, sauf que l’élément est visuellement entièrement transparent. C'est logique.

**boboss123** · 17/04/2013, 16h44

oki,

En farfouillant, je crois avoir compris : il faut que la <input type="file"> soit positionnée devant le bouton apparent.
=> ils ont mis le bouton + la <input type="file"> dans un <span> et ils ont agrandi la taille de la <input type="file"> de façon à ce que le bouton de celle-ci soit super grand (il déborde du span) : comme ça, lorsqu'on essaie de cliquer sur le bouton apparent, on click en réalité sur le bouton de la <input type="file"> (ce n'est pas du tout le même principe que j'ai décrit : lancement d'un event click sur la <input type="file"> lorsqu'on click sur le bouton apparent).

=> ce système permet de résoudre le problème sous IE8 (certaines personnes disent que ce n'est pas un bug mais que ça devrait être le fonctionnement normal pour tous les navigateurs)

input de type file bug

JavaScript

Discussions similaires

Partager

Partager