Personnaliser un input type file

**sarah65536** · 27/03/2009, 16h02

Bonjour ! j'ai un formulaire dans lequel, j'affiche un input de type file. il y a plusieurs choses que je voudrais faire dessus SANS utiliser de javascript. avec seulement, de l'html et du php.

Voila la partie du code : :

Code :

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

1
2
3
4
5
6
7
 
<form method="post" action="index.php?page=admindoc" enctype="multipart/form-data">
   <!-- On limite le fichier à 100Ko -->
   <input type="hidden" name="taille_max" value="<100000">
   <input type="file" name="up">
   <input  type="submit" name="envoyer" >
</form>

J'aimerai donc :

1 - degriser le champs ou va s'afficher le chemin du fichier

2 - permettre de saisir directement le lien du fichier à uploader dans le champs texte.

3 - Appliquer un style CSS à la zone de saisie, et au bouton parcourir

4 - Lorsque l'on a cliqué sur parcourir, appliquer un filtre pour n'afficher que les type de fichiers voulus. ( pour l'instant je fais le tri lorsque l'utilisateur à cliqué sur submit)

Voila, je crois que c'est tout.

Merci de votre aide !

Invité · 29/03/2009, 07h27

Bonjour,
le problème c'est que les navigateurs n'affichent pas de la meme manière les input type="file" !
Ils ont chacun leur propre gestion.

IE ou FF affichent :
une "boite" texte (pour le nom du ficher) et un bouton "parcourir ..."

alors que Safari affiche :
un bouton "choisir le fichier" avec à coté "aucun fichier sélectionné" (ou le nom du fichier selectionné).

Essaye toujours qqchose comme ca :

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
<head>
<style type="text/css">
.submit {
        border: 1px solid #800000;
        background-color: #CCCCFF;
        font-weight: bold;
}
.file {
        border: 1px solid #800000;
        background-color: #CCCCFF;
        font-weight: bold;
}
</style>
</head>
 
<body>
<form method="post" action="index.php?page=admindoc" enctype="multipart/form-data">
   <!-- On limite le fichier à 100Ko -->
   <input type="hidden" name="taille_max" value="<100000" />
   <input class="file" type="file" name="up" size="20" />
   <input class="submit" type="submit" name="envoyer" value="envoyer" />
</form>
</body>

Mais ca donne quand meme des resultats differents suivant le navigateur utilisé ...
J'ai testé : c'est "rock & Roll" !
(fais le test toi-meme, tu verras)

Pour le "4 - Lorsque l'on a cliqué sur parcourir, appliquer un filtre pour n'afficher que les type de fichiers voulus. ( pour l'instant je fais le tri lorsque l'utilisateur à cliqué sur submit)"
je ne crois pas que ce soit possible.

**sarah65536** · 30/03/2009, 09h25

Merci jreaux62.

Je ne sais plus trop comment faire. Ce que tu m'a donné avec les css ne fonctionne pas dans mon cas. Néanmoins, tes renseignements concernant les differents navigateurs me sont bien utiles. Je me doutait bien d'un petit coup tordu de ce genre la... Vivement que tout soit standardisé....

Pour en revenir à mon problème, ce que j'aimerai vraiment c'est pouvoir faire un copier/coller du chemin du fichier dans mon input file. Le reste, pour le moment c'est secondaire.

Quelqu'un connait il un moyen ????

Help !

**Bisûnûrs** · 30/03/2009, 11h23

Ce que tu demandes n'est pas possible. Permettre la saisie dans ce champ signifie pouvoir le manipuler en Javascript par exemple, et c'est la porte ouverte aux trous béants de sécurité.

Sinon, pour le customiser, tu as ce lien :
http://j-willette.developpez.com/tut...ss/formulaire/

Ou alors, le faire en Flash, ce qui te permettra d'avoir qu'un certain type de fichier dans la fenêtre de navigation qui s'ouvre :
http://jeanphiblog.media-box.net/dot...ference-upload

**sarah65536** · 30/03/2009, 13h47

Merci pour les liens ! je vais m'y pencher dessus sérieusement !

Let's go to learn flash !

Personnaliser un input type file [XHTML 1.0]

HTML

Discussions similaires

Partager

Partager