Envoyer un fichier sans bouton parcourir [Résolu]

Signaler
Messages postés
1980
Date d'inscription
dimanche 20 février 2005
Statut
Membre
Dernière intervention
24 septembre 2012
-
Messages postés
332
Date d'inscription
mardi 12 juillet 2005
Statut
Membre
Dernière intervention
17 juillet 2010
-
Bonjour à tous,

sauriez-vous comment faire pour envoyer un fichier sans le traditionnel bouton "Parcourir" ?

Je voudrais faire exactement comme sur Yahoo mail : on clique sur la petite icône "joindre un fichier", là ça ouvre un browser pour choisir son fichier, et quand on a fait OK dans ce browser ça l'envoie directement sans qu'on ait eu à valider un autre bouton pour valider le formulaire lui-même.

Merci d'avance !

3 réponses

Messages postés
1980
Date d'inscription
dimanche 20 février 2005
Statut
Membre
Dernière intervention
24 septembre 2012
5
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
Messages postés
1980
Date d'inscription
dimanche 20 février 2005
Statut
Membre
Dernière intervention
24 septembre 2012
5
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.
Messages postés
332
Date d'inscription
mardi 12 juillet 2005
Statut
Membre
Dernière intervention
17 juillet 2010

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/