Firefox 3 et type = "file"

**Deallyra** · 30/04/2009, 17h42

Bonsoir,

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

Code html :

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

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 ?

Invité · 01/05/2009, 15h37

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.

**Deallyra** · 01/05/2009, 15h59

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.

**Macmillenium** · 01/05/2009, 16h04

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

**Deallyra** · 01/05/2009, 16h10

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

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

**Macmillenium** · 01/05/2009, 16h18

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

**Deallyra** · 05/05/2009, 10h00

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 :

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

**andry.aime** · 05/05/2009, 10h11

Salut,
essaye avec

Code :

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

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

**Deallyra** · 05/05/2009, 11h02

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

C'est nickel

Voici le code final.

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

**devyan** · 13/05/2009, 16h09

Désolé de jouer les rabat-joie mais ça ne fonctionne pas avec FF3 (en tout cas pas avec la version 3.0.10)

**SpaceFrog** · 13/05/2009, 17h10

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

Firefox 3 et type = "file"

JavaScript

Vue hybride

Discussions similaires

Partager

Partager