jQuery Girl
  1. jQuery Girl
  3. bouton de téléchargement de fichier sans champ de saisie?
Intereting Posts
Grouper par tableau JSON à l’aide de jQuery JQuery – Comment append une seule balise HTML à du HTML? Liaison externe à un onglet, on ne change pas, Bootstrap 3.3.5 événement de frappe se déclenchant deux fois PHP json_encode to JS Conflits jQuery / prototype à Magento Problème avec $ .each () dans jQuery comment gérer l’événement de changement de ligne de la table en utilisant jquery? Validation jQuery – Comment séparer les erreurs dans le rappel errorPlacement? Comment compter le nombre de caractères dans une DIV avec javascript Utilisation de Ajax pour le chargement de vues partielles dans .NET MVC4 Saisissez les parameters d’URL pour gérer les options de formulaire de recherche à l’aide de jQuery ou javascript Comment puis-je répliquer un div un certain nombre de fois en fonction d’une valeur de sélection? Exécution de javascript dans une page chargée avec jQuery Ajax jQuery Validator – valide uniquement l’événement onblur (pas onchange)

bouton de téléchargement de fichier sans champ de saisie?

Dupliquer possible:
jQuery: simuler un clic sur un ne fonctionne pas dans Firefox?

Est-il possible d’avoir un bouton de fichier sans entrée à côté de celui-ci par défaut? Idéalement, tout ce que je veux, c’est un bouton qui permet à l’utilisateur de naviguer dans un fichier sans afficher ce qu’il a sélectionné avant son téléchargement. Je soumettrai le formulaire de la manière suivante lorsqu’un utilisateur choisit un fichier: 

$("#file").change(function() { $("#update_button").sortinggger('click'); });

Je suis sûr que cela doit être possible avec un peu de magie css ou jquery …

Si je me souviens bien, HTML5 vous permet d’appeler la méthode de click sur un élément d’entrée masqué pour afficher le dialog de fichier via un bouton personnalisé (pourquoi ne pas simplement le faire fonctionner sans élément, je ne sais pas). Malheureusement, tous les navigateurs actuellement utilisés ne le supportent pas encore. Vous devez donc styler une entrée de fichier pour qu’elle ressemble à un bouton.

C’est un bidouillage CSS hilarant, ingénieux mais ingénieux, que je suis tombé sur un site (probablement imgur): 

 .fileupload { width: 100px; height: 50px; position: relative; overflow: hidden; background: ...; /* and other things to make it pretty */ } .fileupload input { position: absolute; top: 0; right: 0; /* not left, because only the right part of the input seems to be clickable in some browser I can't remember */ cursor: pointer; opacity: 0.0; filter: alpha(opacity=0); /* and all the other old opacity stuff you want to support */ font-size: 300px; /* wtf, but apparently the most reliable way to make a large part of the input clickable in most browsers */ height: 200px; }

Et le HTML qui va avec: 

 
  Any content here, perhaps button text

Cela rend le fichier lui-même énorme (en modifiant la taille de la police (!?)) Pour s’assurer qu’il recouvre le bouton, puis coupe le surplus avec un overflow: hidden; . Cela peut ne pas fonctionner pour des boutons absolument énormes.

Vous pouvez simplement masquer le bouton de input avec visibility: hidden; et attachez un gestionnaire d’événements click à l’autre bouton:

HTML:

CSS: 

 input { display: block; visibility: hidden; width: 0; height: 0; }

JavaScript: 

 $('button').click(function(){ $('input').click(); });

Voici le violon: http://jsfiddle.net/tCzuh/

Si vous définissez l’opacité sur 0, vous pouvez append une autre div sous celle-ci qui ressemble à un bouton. Vous pouvez styler cela comme bon vous semble alors.

Exemple de code de travail ci-dessous: 

  
 
upload

Une option à regarder est ici:

http://shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom

Cela permet plus de personnalisation d’un champ