Envoyer un fichier sans bouton parcourir
Résolu
Evangun
Messages postés
1980
Date d'inscription
dimanche 20 février 2005
Statut
Membre
Dernière intervention
24 septembre 2012
-
5 août 2007 à 11:55
cs_Kysic Messages postés 332 Date d'inscription mardi 12 juillet 2005 Statut Membre Dernière intervention 17 juillet 2010 - 6 août 2007 à 14:51
cs_Kysic Messages postés 332 Date d'inscription mardi 12 juillet 2005 Statut Membre Dernière intervention 17 juillet 2010 - 6 août 2007 à 14:51
A voir également:
- Envoyer un fichier sans bouton parcourir
- Fichier .ini - Conseils pratiques -Visual Basic / VB.NET
- Fichier class ✓ - Forum Java
- Parcourir arraylist java - Forum Java
- Fichier json - Conseils pratiques -Javascript
- Parcourir une chaine de caractère en python ✓ - Forum Python
3 réponses
Evangun
Messages postés
1980
Date d'inscription
dimanche 20 février 2005
Statut
Membre
Dernière intervention
24 septembre 2012
4
6 août 2007 à 13:19
6 août 2007 à 13:19
Bon, pas de réponses, et aucune info trouvée sur le web pour personnaliser un input file comme je le veux...
Je reviens donc avec la solution que j'ai inventée :
- constat : aucune possibilité de personnaliser le input file pour de vrai, seulement des "astuces"
- la propriété css height permet de changer la hauteur du bouton
- pour sa largeur, il faut jouer sur la taille de la police, c'est pas évident, car width ne fonctionne pas. Si le bouton doit être large, je conseille une grande police pour avoir un grand bouton et ensuite diminuer sa zone cliquable en l'entourant de 2 divs par-dessus sur les côtés.
- sous IE (6), on peut se débarrasser du champ texte à côté du "Parcourir" avec width 0.
- il faut rendre le input transparent et le mettre le bouton au-dessus du faux bouton de manière à ce que quand on clique sur le faux bouton, en réalité on clique sur le vrai.
- sous Firefox il reste à mettre une div au-dessus du champs texte à côté du bouton parcourir pour ne plus qu'il soit cliquable (et la propriété cursor ne fonctionne pas sous FF sur input file au fait). Enfin mettre un z-index sur l'input et ses div attachées qui soit inférieur aux éléments alentours, pour qu'il n'empêche pas de cliquer ailleurs. Attention aussi à mettre l'input dans une div qui soit fixée en absolue, et non pas mettre la position absolue directement sur l'input, sinon il y a un bug avec la zone cliquable du champ texte.
- enfin un petit effet onmouseover sur l'input qui modifie le faux bouton et l'illusion est parfaite.
C'est assez complexe, mais avec des efforts ça rend très bien. Le seul exemple que je connaisse (à part celui de mon futur site ), c'est la nouvelle version de Yahoo mail : créez un nouveau message, et regardez le bouton "Joindre". Je ne sais pas exactement comment ils ont fait, mais je suppose qu'ils utilisent la même technique que moi. Ce qui me fait penser ça en particulier c'est qu'il n'y a pas de cursor:pointer sur ce bouton dans FF (contrairement aux autres boutons de l'interface), ce qui est typique d'un input file caché... voili voilou, bonne chance à tous
Je reviens donc avec la solution que j'ai inventée :
- constat : aucune possibilité de personnaliser le input file pour de vrai, seulement des "astuces"
- la propriété css height permet de changer la hauteur du bouton
- pour sa largeur, il faut jouer sur la taille de la police, c'est pas évident, car width ne fonctionne pas. Si le bouton doit être large, je conseille une grande police pour avoir un grand bouton et ensuite diminuer sa zone cliquable en l'entourant de 2 divs par-dessus sur les côtés.
- sous IE (6), on peut se débarrasser du champ texte à côté du "Parcourir" avec width 0.
- il faut rendre le input transparent et le mettre le bouton au-dessus du faux bouton de manière à ce que quand on clique sur le faux bouton, en réalité on clique sur le vrai.
- sous Firefox il reste à mettre une div au-dessus du champs texte à côté du bouton parcourir pour ne plus qu'il soit cliquable (et la propriété cursor ne fonctionne pas sous FF sur input file au fait). Enfin mettre un z-index sur l'input et ses div attachées qui soit inférieur aux éléments alentours, pour qu'il n'empêche pas de cliquer ailleurs. Attention aussi à mettre l'input dans une div qui soit fixée en absolue, et non pas mettre la position absolue directement sur l'input, sinon il y a un bug avec la zone cliquable du champ texte.
- enfin un petit effet onmouseover sur l'input qui modifie le faux bouton et l'illusion est parfaite.
C'est assez complexe, mais avec des efforts ça rend très bien. Le seul exemple que je connaisse (à part celui de mon futur site ), c'est la nouvelle version de Yahoo mail : créez un nouveau message, et regardez le bouton "Joindre". Je ne sais pas exactement comment ils ont fait, mais je suppose qu'ils utilisent la même technique que moi. Ce qui me fait penser ça en particulier c'est qu'il n'y a pas de cursor:pointer sur ce bouton dans FF (contrairement aux autres boutons de l'interface), ce qui est typique d'un input file caché... voili voilou, bonne chance à tous
Evangun
Messages postés
1980
Date d'inscription
dimanche 20 février 2005
Statut
Membre
Dernière intervention
24 septembre 2012
4
6 août 2007 à 13:48
6 août 2007 à 13:48
En fait il y a bien mieux qu'ajouter des divs par-dessus pour faire un bouton à la taille parfaite quelle que soit le navigateur : il faut mettre un très gros input dans une div aux bonnes dimensions avec un overflow hidden. Du coup on n'a plus à s'occuper des z-index non plus.
cs_Kysic
Messages postés
332
Date d'inscription
mardi 12 juillet 2005
Statut
Membre
Dernière intervention
17 juillet 2010
6 août 2007 à 14:51
6 août 2007 à 14:51
Interressant, merci pour l'astuce, même si je penses pas m'en servir, du moins dans l'immédiat (ça fait un peu bricolage, mais c'est vrai que ça rend mieux).
http://kysicurl.free.fr/
http://kysicurl.free.fr/