type d'entrée = bouton afficher uniquement le fichier

154

Existe-t-il un moyen de styliser (ou de script) un <input type=file />élément pour n'avoir que le bouton "Parcourir" visible sans champ de texte?

Merci

Edit : Juste pour clarifier pourquoi j'ai besoin de cela. J'utilise le code de téléchargement multi-fichier de http://www.morningz.com/?p=5 et il n'a pas besoin de champ de texte d'entrée car il n'a jamais de valeur. Le script ajoute simplement le fichier nouvellement sélectionné à la collection sur la page. Cela aurait l'air beaucoup mieux sans champ de texte, si c'est possible.

javascript html css Andrija
la source

Réponses:

169 
<input type="file" id="selectedFile" style="display: none;" />
<input type="button" value="Browse..." onclick="document.getElementById('selectedFile').click();" />

Cela fonctionnera sûrement je l'ai utilisé dans mes projets, j'espère que cela aide :)

shiba
la source
1
Cette réponse est si simple et élégante et a fonctionné pour tous les navigateurs.
Mike.C.Ford
C'est de loin la meilleure solution que j'ai trouvée. Il élimine certains comportements de style d'entrée de fichier vraiment bizarres avec différents navigateurs mobiles. Maintenant, mon contrôle d'entrée de fichier ne se distingue pas comme un pouce endolori avec le reste de ma mise en page. Merci beaucoup, j'aimerais pouvoir voter plus de 1.
Highdown
... et ajoutez onchange = "this.form.submit ();" à l'élément Fichier d'entrée pour commencer le téléchargement après la sélection du fichier. N'oubliez pas d'encapsuler tous les éléments avec la balise Form.
Tomas le
1
Cela ne fonctionnera pas dans IE8 et les versions antérieures, car lors de la soumission du formulaire, vous obtiendrez une erreur Accès refusé (vous ne pouvez pas déclencher les entrées de fichier avec js dans IE8 et ci-dessous pour des «raisons de sécurité»)
unenthusiasticuser
3
@unenthusiasticuser est correct et ne fonctionnera pas sur ipad pour la même raison de sécurité. :)
Mahi
80

J'avais beaucoup de mal à essayer d'accomplir cela. Je ne voulais pas utiliser de solution Flash et aucune des bibliothèques jQuery que j'ai examinées n'était fiable sur tous les navigateurs.

J'ai proposé ma propre solution, qui est entièrement implémentée en CSS (à l'exception du changement de style onclick pour faire apparaître le bouton «cliqué»).

Vous pouvez essayer un exemple fonctionnel ici: http://jsfiddle.net/VQJ9V/307/ (Testé dans FF 7, IE 9, Safari 5, Opera 11 et Chrome 14)

Cela fonctionne en créant un gros fichier d'entrée (avec la taille de la police: 50px), puis en l'enveloppant dans un div qui a une taille fixe et un débordement: caché. L'entrée n'est alors visible qu'à travers cette "fenêtre" div. Le div peut recevoir une image ou une couleur d'arrière-plan, du texte peut être ajouté et l'entrée peut être rendue transparente pour révéler l'arrière-plan du div:

HTML:

<div class="inputWrapper">
    <input class="fileInput" type="file" name="file1"/>
</div>

CSS:

.inputWrapper {
    height: 32px;
    width: 64px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    /*Using a background color, but you can use a background image to represent a button*/
    background-color: #DDF;
}
.fileInput {
    cursor: pointer;
    height: 100%;
    position:absolute;
    top: 0;
    right: 0;
    z-index: 99;
    /*This makes the button huge. If you want a bigger button, increase the font size*/
    font-size:50px;
    /*Opacity settings for all browsers*/
    opacity: 0;
    -moz-opacity: 0;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0)
}

Faites-moi savoir s'il y a des problèmes avec cela et j'essaierai de les résoudre.

esperluette
la source
4
c'était la meilleure solution que j'ai trouvée et qui fonctionnait avec tous les navigateurs
Fatal
2
Tu es l'homme. J'ai eu du mal avec ce problème sur FF et votre solution est la seule qui fonctionne vraiment, spécialement avec des boutons plus gros en augmentant sa zone active en utilisant "font-size". Merci! :)
jpincheira
2
Excellent sans utiliser de script
Bujji
1
Twitter le fait mais c'était un peu compliqué par rapport à celui-ci. Ça marche bien pour moi!
volume un
bonne solution! Juste une question: pourquoi ne pas donner à .fileInput une largeur de 100% et définir la largeur de .inputWrapper sur auto?
luin le
52

J'ai perdu ma journée aujourd'hui pour que cela fonctionne. Je n'ai trouvé aucune des solutions ici fonctionnant dans chacun de mes scénarios.

Ensuite, je me suis souvenu que j'avais vu un exemple pour le téléchargement de fichier JQuery sans zone de texte. Donc ce que j'ai fait, c'est que j'ai pris leur exemple et je l'ai réduit à la partie pertinente.

Cette solution fonctionne au moins pour IE et FF et peut être entièrement stylisée. Dans l'exemple ci-dessous, l'entrée de fichier est masquée sous le bouton fantaisie "Ajouter des fichiers".

<html>

<head>
    <title>jQuery File Upload Example</title>
    <style type="text/css">
        .myfileupload-buttonbar input
        {
            position: absolute;
            top: 0;
            right: 0;
            margin: 0;
            border: solid transparent;
            border-width: 0 0 100px 200px;
            opacity: 0.0;
            filter: alpha(opacity=0);
            -o-transform: translate(250px, -50px) scale(1);
            -moz-transform: translate(-300px, 0) scale(4);
            direction: ltr;
            cursor: pointer;
        }
        .myui-button
        {
            position: relative;
            cursor: pointer;
            text-align: center;
            overflow: visible;
            background-color: red;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div id="fileupload" >
        <div class="myfileupload-buttonbar ">
            <label class="myui-button">
                <span >Add Files</span>
                <input id="file" type="file" name="files[]" />
            </label>
        </div>
    </div>
</body>
</html>
tmanthey
la source
4
Une partie importante est que le débordement du conteneur est défini sur masqué.
Maxim V. Pavlov
1
Cela a absolument fonctionné pour moi dans IE et Chrome au moins. Merci :)
Kevin Dark
1
largeur de la bordure: 0 0 100px 200px; travaillé pour moi aussi dans IE et Chrome. Merci.
Paul
2
Si j'avais posé la question initiale, j'aurais eu la décence de la marquer comme réponse. Merci.
Mark Rendle
Une meilleure réponse est ci-dessous. Utilisez une étiquette, masquez l'entrée. Fonctionne très bien!
gman le
25

Cachez l'élément de fichier d'entrée et créez un bouton visible qui déclenchera l'événement de clic de ce fichier d'entrée.

Essaye ça:

CSS

#file { width:0; height:0; }

HTML:

<input type='file' id='file' name='file' />
<button id='btn-upload'>Upload</button>

JAVASCRIPT (jQuery):

$(function(){
    $('#btn-upload').click(function(e){
        e.preventDefault();
        $('#file').click();}
    );
});
jojo
la source
J'ai créé un plugin jQuery qui fait tout ce qui fonctionne pour vous: github.com/mbitto/jquery.buttonFile
Manuel Bitto
Cela ne fonctionne pas dans les nouvelles versions d'IE. Le clic indirect fait basculer IE et refuse l'accès. C'est ennuyant.
Andrew
20

Masquez la balise du fichier d'entrée avec css, ajoutez une étiquette et attribuez-la au bouton d'entrée. l'étiquette sera cliquable et lorsque vous cliquez dessus, la boîte de dialogue de fichier sera ouverte.

<input type="file" name="imageUpload" id="imageUpload" class="hide"/> 
<label for="imageUpload" class="button-style">Select file</label>

Ajoutez le style à l'étiquette sous forme de bouton.
Démo en direct

Suresh Pattu
la source
1
Fonctionne bien dans Safari aujourd'hui 4 février 2015
gman
C'est peut-être la réponse la plus simple et la meilleure. J'ajouterais également un onchangegestionnaire au inputpour permettre à du code JS de récupérer les informations du fichier téléchargé.
David R Tribble
16

Ça va être très dur. Le problème avec le type d'entrée de fichier est qu'il se compose généralement de deux éléments visuels, tout en étant traité comme un seul élément DOM. Ajoutez à cela que plusieurs navigateurs ont leur propre aspect et leur propre interface pour l'entrée de fichier, et vous êtes prêt pour le cauchemar. Consultez cet article sur quirksmode.org sur les bizarreries du fichier d'entrée. Je vous garantis que cela ne vous rendra pas heureux (je parle d'expérience).

[ÉDITER]

En fait, je pense que vous pourriez vous en sortir en mettant votre entrée dans un élément conteneur (comme un div) et en ajoutant une marge négative à l'élément. Cacher efficacement la partie zone de texte hors de l'écran. Une autre option serait d'utiliser la technique de l'article que j'ai lié, pour essayer de le styliser comme un bouton.

Erik van Brakel
la source
4
Cet article sur quirksmode est génial. Cependant, les entrées de fichiers de style sont toujours une douleur. : P
MitMaro
Je ne pense pas que la marge netagive contenue fonctionnera bien une fois que vous aurez pris en compte les différents styles de navigateur et les tailles de police minimales différentes d'un utilisateur à l'autre.
joebert
1
joebert: Je suis d'accord, je pense que la meilleure option reste la technique affichée dans l'article de quirksmode, combien douloureusement hackish ...
Erik van Brakel
14

Correctif pour fonctionner dans tous les navigateurs RÉSOLU:

      <input type = "button" value = "Choose image" 
       onclick ="javascript:document.getElementById('imagefile').click();">
      <input id = "imagefile" type="file" style='visibility: hidden;' name="img"/>

J'ai testé dans FF, Chrome et IE - fonctionne bien, styles appliqués aussi: D

Javier Reyes
la source
6
Je suis à peu près sûr que cela ne fonctionne pas sur un grand nombre de navigateurs (y compris FF et IE, lors de mon dernier test) - le seul navigateur sur lequel je me souviens qu'il fonctionnait était Chrome.
Herman Schaaf
Cela ne fonctionne qu'avec jQuery, mais ce n'est pas une solution autonome.
Solénoïde
3
Cela semble fonctionner (cela fait apparaître le menu du sélecteur de fichiers), mais lorsque le formulaire est soumis, le fichier n'est pas envoyé dans FireFox et IE, pour des raisons de sécurité.
ampersandre
13

J'ai essayé de mettre en œuvre les deux meilleures solutions et cela a fini par être une énorme perte de temps pour moi. En fin de compte, l'application de cette classe .css a résolu le problème ...

input[type='file'] {
  color: transparent;
}

Terminé! super propre et super simple ...

nikotromus
la source
1
C'est une excellente méthode!
Kaow
9

Une autre façon simple de faire cela. Créez une balise "fichier de type d'entrée" en html et cachez-la. Cliquez ensuite sur un bouton et formatez-le en fonction des besoins. Après cela, utilisez javascript / jquery pour cliquer par programme sur la balise d'entrée lorsque vous cliquez sur le bouton.

HTML: -

<input id="file" type="file" style="display: none;">
<button id="button">Add file</button>

JavaScript: -

document.getElementById('button').addEventListener("click", function() {
    document.getElementById('file').click();
});

jQuery: -

$('#button').click(function(){
    $('#file').click();
});

CSS: -

#button
{
    background-color: blue;
    color: white;
}

Voici un violon JS fonctionnel pour le même: - http://jsfiddle.net/32na3/

divyenduz
la source
2
C'est une solution intéressante mais je ne peux pas la faire fonctionner dans Chrome. Apparemment, les autres non plus. Opera et Chrome ne permettent pas de cliquer sur le fichier de type d'entrée pour des raisons de sécurité. Vous trouverez ici plus d'informations à ce sujet et une solution qui a fonctionné pour moi: stackoverflow.com/a/3030174/2650732
wojjas
À l'époque où j'ai écrit cette réponse, cela fonctionnait sur Chrome. Merci de m'avoir fait savoir, mettra à jour ma réponse en conséquence
divyenduz
7

J'ai utilisé une partie du code recommandé ci-dessus et après de nombreuses heures à perdre mon temps, je suis finalement arrivé à une solution sans sac css.

Vous pouvez l'exécuter ici - http://jsfiddle.net/WqGph/

mais ensuite trouvé une meilleure solution - http://jsfiddle.net/XMMc4/5/

 <input type = "button" value = "Choose image #2" 
   onclick ="javascript:document.getElementById('imagefile').click();">
       <input id = "imagefile" type="file" style='display:none;' name="img" value="none"/>see jsfiddle code for examples<br/>
GoreOle
la source
Le problème est que l' onchangeévénement n'est pas déclenché pour l' inputélément masqué .
David R Tribble
6

Voici mon bon vieux remède:

<input type="file" id="myFile" style="display:none;" />
<button type="button" onclick="document.getElementById('myFile').click();">Browse</button>

Au moins, cela a fonctionné dans Safari.

Clair et simple.

Zooza S
la source
4

Vous pouvez étiqueter une image afin que lorsque vous cliquez dessus, l'événement de clic du bouton soit déclenché. Vous pouvez simplement rendre le bouton normal invisible:

<form>
    <label for="fileButton"><img src="YourSource"></label>    <!--You don't have to put an image here, it can be anything you like-->
    <input type="file" id="fileButton" style="display:none;"/>
</form>

Cela a fonctionné pour moi sur tous les navigateurs et est très facile à utiliser.

D-inventeur
la source
4

Vous pouvez envoyer l'événement de clic sur une entrée de fichier cachée comme ceci:

<form action="#type your action here" method="POST" enctype="multipart/form-data">
   		<div id="yourBtn" style="height: 50px; width: 100px;border: 1px dashed #BBB; cursor:pointer;" >Click to upload!</div>
    	<!-- hide input[type=file]!-->
    	<div style='height: 0px;width:0px; overflow:hidden;'><input id="upfile" type="file" value="upload"/></div>
    	<input type="submit" value='submit' >
    </form>

    <script type="text/javascript">
    	var btn = document.getElementById("yourBtn");
    	var upfile = document.getElementById("upfile"); 
    	btn.addEventListener('click',function(){
    		if(document.createEvent){
    			var ev = document.createEvent('MouseEvents');
    			ev.initEvent('click',true,false);
    			upfile.dispatchEvent(ev);
    		}else{
        		upfile.click();
    		}
    	});
    
    </script>
Développer l'extrait

jiang min
la source
var ev = document.createEvent('HTMLEvents'); changer HTMLEvents en MouseEventsvar ev = document.createEvent('MouseEvents');
jiang min
Bien, merci! J'ai converti votre message en un extrait de code exécutable et changé HtmlEvents en MouseEvents
Fabian Schmengler
4

HTML:

<input type="file" name="upload" id="upload" style="display:none"></input>
    <button  id="browse">Upload</button>

JQUERY

 $(document).ready(function(){
        $("#browse").click(function(){
        $("#upload").click();
        });
 });

J'espère que cela fonctionne :)

Anoop saju
la source
4

Vous pouvez donner à l'élément d'entrée une opacité de police de 0. Cela masquera le champ de texte sans masquer le bouton «Choisir les fichiers».

Aucun javascript requis, effacez le navigateur croisé depuis IE 9

Par exemple, 

input {color: rgba(0, 0, 0, 0);}
Nicholmen
la source
3

J'ai une solution vraiment pirate avec ça ...

<style type="text/css"> 
    input[type="file"]
    { 
        width: 80px;        
    } 
</style>

<input id="File1" type="file" />

Le problème est que l'attribut width qui masque le champ de texte varie évidemment d'un navigateur à l'autre, varie d'un thème Windows XP à l'autre, etc. Peut-être que c'est quelque chose avec lequel vous pouvez travailler? ...


la source
Même celui-ci ne fonctionnera pas sur IE6, le navigateur ne comprend pas les sélecteurs d'attributs.
Adrian Godong
3

Je sais que c'est un ancien message, mais un moyen simple de faire disparaître le texte consiste simplement à définir la couleur du texte sur celle de votre arrière-plan.

Par exemple, si l'arrière-plan de votre saisie de texte est blanc, alors:

input[type="file"]{
color:#fff;
}

Cela n'affectera pas le texte Choose File qui restera noir en raison du navigateur.

Keleko
la source
1
Dans le cas où un utilisateur clique sur cette partie, la fenêtre contextuelle de téléchargement sera ouverte.
Praveen
3

Cela fonctionne pour moi:

input[type="file"]  {
    color: white!important;
}
débutant
la source
2

ma solution est juste de le définir dans un div comme "druveen" dit, mais j'ajoute mon propre style de bouton au div (le faire ressembler à un bouton avec un: hover) et je viens de définir le style "opacity: 0;" à l'entrée. Fonctionne un charme pour moi, j'espère qu'il en fera de même pour vous.

ThomasG
la source
2

Je viens de styliser un fichier d'entrée avec une largeur: 85px, et le champ de texte a disparu du tout


la source
Alors le champ de texte a-t-il disparu ou non? "du tout" peut impliquer une négation, mais votre grammaire est imparfaite (et donc ambiguë).
Kirk Woll
2

Ce code HTML s'affiche uniquement sur le bouton Télécharger le fichier

<form action="/action_page.php">
    <input type="button" id="id" value="Upload File"  onclick="document.getElementById('file').click();" />
    <input type="file" style="display:none;" id="file" name="file" onchange="this.form.submit()"/>  
</form>
Anil Shetty
la source
1
Veuillez envisager d'ajouter à votre réponse des informations contextuelles décrivant ce que fait votre extrait de code.
Clijsters
1 
<a href="#" id="select_logo">Select Logo</a> <input type="file" id="logo"> 

$("#logo").css('opacity','0');

$("#select_logo").click(function(){
   $().trigger('click');
   return false;
});
Somwang Souksavatd
la source
1

Pour moi, le moyen le plus simple consiste à utiliser une couleur de police comme la couleur d'arrière-plan. Simple, pas élégant, mais utile.

<div style="color:#FFFFFF">   <!-- if background page is white, of course -->
<input class="fileInput" type="file" name="file1"/></div>

la source
1

Voici donc la meilleure façon de procéder POUR TOUS LES NAVIGATEURS:

Oubliez CSS!

<p>Append Image:</p> 
<input type="button" id="clickImage" value="Add Image" />
<input type="file" name="images[]" id="images" multiple />

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" charset="utf-8"></script>

<script>
$('#images').hide();        
$('#clickImage').click( function() {    
    $('#images').trigger('click');  
});
</script>
user1965301
la source
CELA NE FONCTIONNE PAS DANS SAFARI ... car il n'autorisera pas .trigger ('clic') pour des raisons de sécurité:? pour le faire fonctionner dans safari, créez dynamiquement le bouton de fichier et ajoutez-le à nouveau lorsqu'il est à nouveau chargé
user1965301
1

Toutes ces réponses sont mignonnes, mais CSS ne fonctionnera pas car ce n'est pas la même chose sur tous les navigateurs et appareils, la première réponse que j'ai écrite fonctionnera dans tout sauf Safari. Pour qu'il fonctionne sur tous les navigateurs tout le temps, il doit être créé dynamiquement et recréé chaque fois que vous souhaitez effacer le texte d'entrée:

    var imageDiv = document.createElement("div");   
    imageDiv.setAttribute("id", "imagediv");
    imageDiv.style.cssText = 'position:relative; vertical-align: bottom;';  
    var imageText = document.createTextNode("Append Image:");
    var newLine = document.createElement("br"); 
    var image = document.createElement("input");    
    image.setAttribute("type", "file");
    image.setAttribute("id", "images");
    image.setAttribute("name", "images[]");     
    image.setAttribute("multiple", "multiple");
    imageDiv.appendChild(imageText); 
    imageDiv.appendChild(newLine); 
    imageDiv.appendChild(image); 
    questionParagraph.appendChild(imageDiv);
user1965301
la source
1

La réponse de tmanthey est plutôt bonne, sauf que vous ne pouvez pas jouer avec la largeur de la bordure dans Firefox v20. Si vous voyez le lien (démo, je ne peux pas vraiment le montrer ici), ils ont résolu le problème en utilisant font-size = 23px, transform: translate (-300px, 0px) scale (4) pour Firefox pour agrandir le bouton.

D'autres solutions utilisant .click () sur un div différent sont inutiles si vous voulez en faire une zone de saisie glisser-déposer.

Balint Karakai
la source
1

Il existe plusieurs options valides ici, mais j'ai pensé que je donnerais ce que j'ai trouvé en essayant de résoudre un problème similaire. http://jsfiddle.net/5RyrG/1/ 

<span class="btn fileinput-button">
    <span>Import Field(s)</span>
    <input id="fileupload" type="file" name="files[]" onchange="handleFiles(this.files)" multiple>
</span>
<div id="txt"></div>

function handleFiles(files){
    $('#txt').text(files[0].name);  
}
Matthew Pautzke
la source
1

Résolu avec le code suivant:

<div style="overflow: hidden;width:83px;"> <input style='float:right;' name="userfile" id="userfile" type="file"/> </div>

druveen
la source
1

J'ai écrit ceci:

<form action='' method='POST' name='form-upload-image' id='form-upload-image' enctype='multipart/form-data'>

    <div style="width: 0; height: 0; overflow: hidden;">
        <input type="file" name="input-file" id="input-file" onchange="this.files.length > 0 ? document.getElementById('form-upload-image').submit():null;" />
    </div>
    
</form>

<img src="image.jpg" style="cursor: pointer;" onclick="document.getElementById('input-file').click();" />
Développer l'extrait

Fonctionne bien dans tous les navigateurs, pas de jQuery, pas de CSS.

MadMaxIII
la source
1

Voici une version simplifiée de la solution populaire de @ ampersandre qui fonctionne dans tous les principaux navigateurs. Balisage Asp.NET

<asp:TextBox runat="server" ID="FilePath" CssClass="form-control"
    style="float:left; display:inline; margin-right:5px; width:300px"
    ReadOnly="True" ClientIDMode="Static" />
<div class="inputWrapper">
    <div id="UploadFile" style="height:38px; font-size:16px; 
      text-align:center">Upload File</div>
    <div>
      <input name="FileUpload" id="FileInput" runat="server" 
             type="File" />
    </div>
  </div>
  <asp:Button ID="UploadButton" runat="server" 
    style="display:none" OnClick="UploadButton_Click" />
</div>
<asp:HiddenField ID="hdnFileName" runat="server" ClientIDMode="Static" />

Code JQuery

$(document).ready(function () {

   $('#UploadFile').click(function () {
       alert('UploadFile clicked');
       $('[id$="FileInput"]').trigger('click');
   });

   $('[id$="FileInput"]').change(function (event) {
       var target = event.target;
       var tmpFile = target.files[0].name;
       alert('FileInput changed:' + tmpFile);
       if (tmpFile.length > 0) {
          $('#hdnFileName').val(tmpFile);
       }
       $('[id$="UploadButton"]').trigger('click');
   });
});

code css

.inputWrapper {
height: 38px;
width: 102px;
overflow: hidden;
position: relative;
padding: 6px 6px;
cursor: pointer;
white-space:nowrap;
/*Using a background color, but you can use a background image to represent
 a button*/
background-color: #DEDEDE;
border: 1px solid gray;
border-radius: 4px;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
}

Utilise un déclencheur de clic "UploadButton" caché pour la publication de serveur avec standard. Le texte avec "Upload File" pousse le contrôle d'entrée hors de vue dans le div wrapper lorsqu'il déborde, il n'est donc pas nécessaire d'appliquer des styles pour le contrôle div "file input". Le sélecteur $ ([id $ = "FileInput"]) autorise la section d'ID avec les préfixes ASP.NET standard appliqués. La valeur de la zone de texte FilePath dans l'ensemble à partir du code serveur derrière hdnFileName.Value une fois le fichier téléchargé.

Dan Randolph
la source