input type=file de montrer uniquement le bouton
Est-il un moyen de style (ou le script) <input type=file />
élément visible uniquement bouton "Parcourir" sans champ de texte?
Grâce
Modifier:
Juste pour préciser pourquoi j'ai besoin de cette. Je suis en utilisant le multi upload de fichier de code à partir de http://www.morningz.com/?p=5 et il n'a pas besoin champ de saisie de texte, car il n'a jamais de valeur. Le Script ajoute juste nouvellement sélectionné le fichier de collection sur la page. Il serait beaucoup mieux sans champ de texte, si c'est possible.
Vous devez vous connecter pour publier un commentaire.
Ce sera sûrement travail, je l'ai utilisé dans mes projets.J'espère que cela aide 🙂
$(this).prev()[0].click()
vous obtiendrez le fichier d'entrée sans aucune connaissance de l'id. vous pouvez remplacer jQuery$(this).prev()[0]
avec stackoverflow.com/questions/574904/... pour vanilla js: faire une fonctionprev(el){ var nextSibling = el.nextSibling; while(nextSibling && nextSibling.nodeType != 1) { nextSibling = nextSibling.nextSibling } return nextSibling; }
Alors c'est juste<input type="button" onclick="prev(this).click()" />
pour obtenir précédent fichier d'entrée. en option filtre dans la boucle d'ignorer les élémentsBrowse...
est codé en dur l'anglais, alors que le navigateur peut localiser le texte d'un fichier d'entrée bouton.J'ai eu un diable de temps à essayer de l'accomplir. Je ne voulais pas utiliser une solution Flash, et aucun des bibliothèques jQuery j'ai regardé étaient fiables sur tous les navigateurs.
Je suis venu avec ma propre solution, qui est mis en œuvre entièrement en CSS (sauf pour le onclick changement de style pour afficher le bouton 'cliqué').
Vous pouvez essayer un exemple ici: http://jsfiddle.net/VQJ9V/307/ (Testé dans FF 7, IE 9, Safari 5, Opera 11 et Chrome 14)
Il fonctionne en créant un grand fichier en entrée (avec font-size:50px), puis en l'enveloppant dans un div qui a une taille fixe et overflow:hidden. L'entrée est alors visible uniquement par le biais de cette "fenêtre" div. La div ne peut être donnée une image d'arrière-plan ou la couleur, le texte peut être ajouté, et l'entrée peut être rendu transparent pour révéler la div de fond:
HTML:
CSS:
Laissez-moi savoir si il ya des problèmes avec elle et je vais essayer de les réparer.
<input type="file">
élément n'a pas été pris en charge par Firefox. Au lieu de cela, le réglage de la taille de police 50px (ou de certains d'un grand nombre d'autres) était un cross-browser sûr moyen de s'assurer que le fichier de l'élément d'entrée est très grande. Le.inputWrapper
sert comme une "fenêtre" à partir de laquelle le fichier d'entrée peut être vu et cliqué sur; la largeur de l' .inputWrapper définit la largeur de votre bouton. Pour mes besoins, j'ai besoin de assurez-vous que le bouton a été 64px large, j'ai donc mis la .inputWrapper largeur de 64px.display: inline-block
, et puis il auto-redimensionnement en fonction de son contenu: jsfiddle.net/4prm4pxu/3opacity
dans.fileInput
par l'établissement de sesleft:200px
, qui défile à l'écran 'Parcourir...' de visible de la vue à l'intérieur de la div extérieure. Mais vous aussi vous devez ensuite définir unonclick
sur la div pour appelerfileInput.click()
.padding-left
à une valeur au moins aussi large que celui de l'extérieur bouton div, pour masquer le bouton lui-même.J'ai perdu ma journée d'aujourd'hui se présente au travail. Je n'en trouve pas de solutions ici de travail de chacun de mes scénarios.
Puis je me suis souvenu, j'ai vu un exemple pour le JQuery File Upload sans zone de texte. Donc, ce que j'ai fait c'est que j'ai pris l'exemple de leur vie et dépouillé vers le bas à la partie.
Cette solution au moins fonctionne pour IE et FF, et peut être entièrement de style. Dans l'exemple ci-dessous le fichier d'entrée est cachée par la fantaisie "Ajouter des Fichiers" bouton.
Cacher l'entrée de fichier de l'élément et de créer un visible bouton qui déclenche l'événement click du input-file.
Essayez ceci:
CSS
HTML:
JAVASCRIPT(jQuery):
Cacher le fichier d'entrée de la balise avec le css, ajouter une étiquette et l'affecter à la touche input. étiquette sera cliquable et lorsque vous cliquez dessus, il va ouvrir la boîte de dialogue de fichier.
Ajoutez le style à l'étiquette comme un bouton.
Démonstration En Direct
onchange
gestionnaire à l'input
pour permettre à certains JS code pour récupérer le fichier téléchargé info.Que cela va être très dur. Le problème avec le fichier input type est qu'il est généralement constitué de deux éléments visuels, tout en étant traités comme un seul DOM-élément. Ajoutez à cela que plusieurs navigateurs ont leur propre look et la sensation pour le fichier d'entrée, et vous serez en mesure de cauchemar. Voir ce l'article sur quirksmode.org sur les bizarreries du fichier d'entrée. Je vous garantie qu'il ne sera pas vous rendre heureux (je parle d'expérience).
[MODIFIER]
En fait, je pense que vous pourriez sortir avec la mise de votre entrée dans un élément conteneur (comme un div), et l'ajout d'une marge négative de l'élément. Masquant la zone de texte de la partie hors de l'écran.
Une autre option serait d'utiliser la technique dans l'article que j'ai lié, pour tenter de style comme un bouton.
Corrigé pour fonctionner dans tous les navigateurs
RÉSOLU:
Je l'ai testé dans FF, Chrome & IE fonctionne bien, les styles appliqués trop 😀
Un autre moyen facile de le faire. Faire une entrée "type de fichier" de la balise html et de le cacher. Puis cliquez sur un bouton et de le formater en fonction des besoins. Après cela, l'utilisation de javascript/jquery par programme cliquez sur la balise d'entrée lorsque le bouton est cliqué.
HTML :-
JavaScript :-
jQuery :-
CSS :-
Ici est un travail JS fiddle pour la même chose :- http://jsfiddle.net/32na3/
J'ai essayé de mettre en œuvre les deux solutions, et il a fini par être une ÉNORME perte de temps pour moi. En fin de compte, l'application de cette .classe css résolu le problème...
Fait! super propre et super simple...
J'ai utilisé le code recommandée ci-dessus, et après de nombreuses heures de waisting mon temps, j'ai finalement venu à un css sac de solution gratuite.
Vous pouvez l'exécuter sur ici - http://jsfiddle.net/WqGph/
mais alors trouvé une meilleure solution - http://jsfiddle.net/XMMc4/5/
onchange
événement n'est pas déclenché pour ce qui est cachéinput
élément.Voici mon bon vieux remède:
Au moins, il a travaillé dans Safari.
Pure et simple.
Vous pouvez attribuer à une image, de sorte lorsque vous cliquez sur l'événement click du bouton sera déclenchée. Vous pouvez tout simplement faire le bouton normal de l'invisible:
Il a travaillé pour moi sur tous les navigateurs, et est très facile à utiliser.
Vous pouvez envoyer l'événement click sur un fichier caché entrée comme ceci:
HTML:
var ev = document.createEvent('HTMLEvents');
changement HTMLEvents à MouseEventsvar ev = document.createEvent('MouseEvents');
HTML:
JQUERY
Espère que cela fonctionne 🙂
Vous pouvez donner à l'élément d'entrée d'une police d'opacité de 0. Cela permet de masquer le champ de texte sans cacher le "sélectionner des Fichiers" bouton.
Pas de javascript requis, claire de la croix-navigateur, en remontant aussi loin que IE 9
E. g.,
Ive a vraiment hacky solution avec cette...
Le problème, c'est la largeur de l'attribut que l'on cachait le champ texte obvously varier entre les navigateurs, varient entre les thèmes de Windows XP et ainsi de suite. Peut-être que c'est quelque chose que vous pouvez travailler avec des si?...
Je sais que c'est un vieux post, mais un simple moyen de rendre le texte disparaît, c'est juste pour définir la couleur du texte à celle de votre arrière-plan.
par exemple, si votre saisie de texte, le fond est blanc, puis:
Cela n'affectera pas la Choisir un Fichier texte qui sera toujours en raison de noir pour le navigateur.
Cela fonctionne pour moi:
ma solution est simplement de s'inscrire dans une div comme "druveen", a déclaré, cependant, j'annonce mon propre style de bouton à la div (la font ressembler à un bouton avec un:hover) et je viens de mettre le style "opacity:0;" à l'entrée. Fonctionne à merveille pour moi, j'espère qu'elle en fait de même pour vous.
Je viens de style d'un fichier d'entrée avec une largeur de: 85px, et le champ de texte a disparu à tous
Ce code HTML montrent seulement de Téléchargement de Fichiers bouton
Pour moi, la façon la plus simple est d'utiliser une police de couleur comme couleur d'arrière-plan. Simple, pas très élégant, mais utile.
Voici donc le meilleur moyen pour ce faire POUR TOUS les NAVIGATEURS:
Oublier CSS!
Toutes ces réponses sont mignons, mais le CSS ne fonctionne pas car ce n'est pas la même dans tous les navigateurs et les périphériques, la première réponse que j'ai écrit va travailler dans tout mais Safari. Pour le faire fonctionner sur l'ensemble des navigateurs de tous les temps, il doit être créé dynamiquement et recréés à chaque fois que vous voulez effacer la saisie du texte:
La réponse de tmanthey est assez bonne, sauf que vous ne pouvez pas jouer avec border-width dans Firefox v20. Si vous voyez le lien (démo, ne peut pas vraiment voir ici), ils ont résolu le problème en utilisant une taille de police=23px, de transformer, de le traduire(-300px, 0px) échelle(4) pour Firefox pour que le bouton soit plus grand.
D'autres solutions à l'aide .cliquez sur() sur un autre div est inutile si vous souhaitez faire un drag'n'drop zone de saisie.
Il y a plusieurs options valides ici, mais pensé que je donnerais ce que j'ai, tout en essayant de résoudre un problème similaire. http://jsfiddle.net/5RyrG/1/
Résolu avec le code suivant:
<div style="overflow: hidden;width:83px;">
<input style='float:right;' name="userfile" id="userfile" type="file"/>
</div>
J'ai écrit ceci:
HTML:
Fonctionner correctement dans tous les navigateurs, pas de jQuery, pas de CSS.
Voici une version simplifiée de @ampersandre populaire, une solution qui fonctionne dans tous les principaux navigateurs.
Asp.NET balisage
JQuery Code
code css
Utilise un caché "Uploadbouton" cliquez sur déclencheur pour la publication de serveur standard . La avec de "Téléchargement de Fichiers" texte pousse le contrôle d'entrée hors de la vue dans le conteneur div quand il déborde donc il n'est pas nécessaire d'appliquer des styles pour le "fichier d'entrée" contrôle de la div. L' $([id$="FileInput"]) sélecteur permet à la section de l'ids à la norme ASP.NET les préfixes appliquée. Le Chemin d'accès du fichier de zone de texte valeur dans l'ensemble du code serveur derrière de hdnFileName.La valeur une fois que le fichier est téléchargé.