Firefox 3 et type = "file"

Version imprimable

Bonsoir,

je suis actuellement à faire joujou avec les formulaires et plus particulièrement le type="file".
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Upload</title> </head> <body> <form method = "POST" action = "#" > <input type = "file" name = "unUploadeur" /> </form> </body> </html>
mais voici... Sous Firefox 3...
Le champ est grisé et dès que l'on clique dessus, c'est comme si on avait cliqué sur le bouton parcourir.

Et cela est gênant pour l'application que je suis à développer...

Donc y-aurait-il à votre connaissance un moyen de simuler le comportement de Firefox 2 ?

01/05/2009, 15h37
Invité

Bonjour,
1- deja : <form method="post" ENCTYPE="multipart/form-data" action="">

2- qu'espères-tu avoir ?
PS: regarde aussi sur Safari : l'affichage n'a rien à voir.
01/05/2009, 15h59
Deallyra

Oui pour l'enctype ;)

J'avoue l'avoir laissé de coté pour cet exemple... Je ne le ferai pas la prochaine fois ;)

Il faudrait que le rendu soit celui de FF2. A savoir que la zone de texte à la gauche du bouton parcourir soit éditable et que lorsque l'on clique dessus (cette zone), qu'elle ne lance pas l'action du bouton parcourir.
01/05/2009, 16h04
Macmillenium

Salut Deallyra,

Malheureusement ce n'est pas possible en CSS ... tout comme les select sous IE, impossible de styler un input file sous Firefox3.

Attention à ton doctype HTML4.01 Transitional incomplet qui bascule les navigateurs graphiques en mode de rendu Quirks ;)
01/05/2009, 16h10
Deallyra

C'est le doctype de base de ZF xD
Je m'étais rapidement bricolé ce fichier... Parce que j'avais vu ce problème sous ZF :s

Du coup je m'étais dit que l'element file avait une pré-config pour avoir ce résultat u_u

Et puis j'ai vu que sur un ancien site que j'avais réalisé, j'avais la même chose :aie:

Donc j'ai finit par tester sous IE puis Firefox2...

Bref, impossible alors... En CSS... JavaScript ce serait possible ? ^^'
(savoir si je pose la question là bas)

Merci à vous deux :)

edit : en fait non, ce n'est pas son doctype par défaut O.o
Je ne comprends pas :s Merci xD
01/05/2009, 16h18
Macmillenium

Citation:

Envoyé par Deallyra

Bref, impossible alors... En CSS... JavaScript ce serait possible ? ^^'
(savoir si je pose la question là bas)

Complètement déconseillé mais ... possible de tricher :?
01/05/2009, 16h22
Deallyra

Effectivement...

Saleté de MAJ ^^'

Bon je verrai ça avec le chef de projet :s

Merci beaucoup :3
01/05/2009, 16h23
Invité

1 pièce(s) jointe(s)

Regarde pourquoi je te parlais de Safari !
(cf piece jointe)
Non seulement il n'y a plus de "case", mais ça me flinguait ma mise en page ! (le nom du fichier s'affichant à coté !)
01/05/2009, 17h23
Deallyra

En effet ^^

Mais le site sera un intranet donc sur un seul Navigateur, une version unique (si les maj sont bien faites ;))

Je reviens à la charge avec une nouvelle idée...

Heu... Franchement c'est laid, infâme et tout ce qu'on veut mais ça pourrait marcher avec les connaissances adéquates sur le sujet. Et surtout je ne peux pas faire autrement... Il m'a été demandé de pouvoir modifier à la main cette zone T_T
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 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" xml:lang = "fr" lang = "fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> input type=file & Firefox 3 </title> </head> <body> <div style = "position: relative"> <form method = "GET" action = "#" enctype="multipart/form-data" onSubmit="this.getElementById('unInputFile').value=this.getElementId('unInputText').value" > <input type = "file" id = "unInputFile" onChange="this.form.getElementById('unInputText').value=this.value" /> <div style = "position: absolute; top: 0; left: 0; width: 11em; height: 2em;" > <input type = "text" id = "unInputText" /> </div> <br /> <input type = "submit" value = "Envoyer" /> </form> </div> </body> </html>
L'idée serait donc de pouvoir alimenter la zone unInputText avec le bouton parcourir.
En fait, dupliquer la valeur de unInputFile dans unInputText.

A la soumission du formulaire, remplacer la valeur de unInputFile par celle de unInputText (même si la saisie peut être erronée ou autre, il y aura des tests à la page suivante et tout le tralala mais bon...)

Mais je n'arrive pas à le faire fonctionner... Savoir quel évènement utiliser aussi :s

05/05/2009, 10h11
andry.aime

Salut,
essaye avec

Code:

<input type = "file" id = "unInputFile" onChange="document.getElementById('unInputText').value=this.value" />

Merci Andry pour cette réponse rapide. Et à tout ceux qui m'auront aidés :)

C'est nickel :)

Voici le code final.

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
 
<!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" xml:lang = "fr" lang = "fr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>
			input type=file & Firefox 3
		</title>
	</head>
	<body>
		<?php
                        if(isset($_POST['upload']))
                        {
                            $content_dir = './'; // dossier où sera déplacé le fichier
                        
                            $tmp_file = $_FILES['unInputFile']['tmp_name'];
                        
                            if( !is_uploaded_file($tmp_file) )
                            {
                                exit('Le fichier est introuvable');
                            }
                            $name_file = $_FILES['unInputFile']['name'];
                            if( !move_uploaded_file($tmp_file, $content_dir . $name_file) )
                            {
                                exit('Impossible de copier le fichier dans $content_dir');
                            }
                            echo "Le fichier a bien été uploadé";
}
                ?>
 
		<div style = "position: relative">
			<form method = "POST" action = "php.php" enctype="multipart/form-data" onSubmit="document.getElementById('unInputFile').value=document.getElementById('unInputText').value" >
			    <input type = "file" name = "unInputFile" id = "unInputFile" onChange="document.getElementById('unInputText').value=this.value" />
			    <div style = "position: absolute; top: 0; left: 0; width: 11em; height: 2em;" >
			    	<input type = "text" id = "unInputText" />
			    </div>
			    <br />
			    <input type = "submit" name = "upload" value = "Envoyer" />
			</form>
		</div>
	</body>
</html>

13/05/2009, 16h09
devyan

Désolé de jouer les rabat-joie mais ça ne fonctionne pas avec FF3 (en tout cas pas avec la version 3.0.10) :(
13/05/2009, 17h10
SpaceFrog

non c'est une securité complementaire sur les browser recents ...
on ne peut pas recupérer le path complet coté client
cel evite la possibilité de navigation sur le disque client

il faut passer par une solution externe au browser de type flash