Styliser un type d'entrée = bouton «fichier»

735

Comment stylisez-vous un type="file"bouton de saisie ?

Shivanand
la source
J'ajouterai ma propre réponse pour le faire comme je l'ai fait ... mais voici un exemple basé sur le bootstrap qui pourrait aider .. geniuscarrier.com/…
Vishnu Narang

Réponses:

235

Le style des entrées de fichier est notoirement difficile, car la plupart des navigateurs ne changeront pas l'apparence de CSS ou de javascript.

Même la taille de l'entrée ne répondra pas aux goûts de:

<input type="file" style="width:200px">

À la place, vous devrez utiliser l'attribut size:

<input type="file" size="60" />

Pour tout style plus sophistiqué que cela (par exemple, changer l'apparence du bouton de navigation), vous devrez examiner l'approche délicate de superposer un bouton de style et une zone de saisie au-dessus de l'entrée de fichier native. L'article déjà mentionné par rm sur www.quirksmode.org/dom/inputfile.html est le meilleur que j'ai vu.

MISE À JOUR

Bien qu'il soit difficile de <input>styliser directement une balise, cela est facilement possible à l'aide d'une <label>balise. Voir la réponse ci-dessous de @JoshCrozier: https://stackoverflow.com/a/25825731/10128619

Jonathan Moffatt
la source
7
Je viens de trouver une solution jquery basée sur ce script ici: blog.vworld.at/2008/08/21/…
mtness
1
La réponse de @TLK Ryan ne fonctionnera pas dans IE lorsque vous essayez de faire des téléchargements iframe. Il vous donne une erreur d'accès refusé. Pour les téléchargements normaux, je conviens que c'est le plus simple!
frostymarvelous
3
Une solution beaucoup plus simple que celle de quirksmode est expliquée ici . Il suffit de mettre ce lien ici, car cette réponse est de toute façon une réponse de lien uniquement.
Joeytje50
10
Pour toute personne intéressée par une approche moderne, je suggère de regarder cette réponse . Il ne nécessite pas non plus JavaScript comme certaines des autres réponses.
Josh Crozier
3
@JoshCrozier a publié une solution incroyablement bien meilleure. Bat même les fausses solutions de mouseclicking :)
Lodewijk
1021

Vous n'avez pas besoin de JavaScript pour cela! Voici une solution multi-navigateur:

Voir cet exemple! - Il fonctionne dans Chrome / FF / IE - (IE10 / 9/8/7)

La meilleure approche serait d'avoir un élément d'étiquette personnalisé avec un forattribut attaché à un élément d'entrée de fichier caché . (L' forattribut de l'étiquette doit correspondre à celui de l'élément de fichier idpour que cela fonctionne).

<label for="file-upload" class="custom-file-upload">
    Custom Upload
</label>
<input id="file-upload" type="file"/>

Comme alternative, vous pouvez également envelopper directement l'élément d'entrée de fichier avec une étiquette: (exemple)

<label class="custom-file-upload">
    <input type="file"/>
    Custom Upload
</label>

En termes de style, il suffit de masquer 1 l'élément d'entrée à l'aide du sélecteur d'attribut .

input[type="file"] {
    display: none;
}

Ensuite, tout ce que vous devez faire est de styliser l' labelélément personnalisé . (exemple) .

.custom-file-upload {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
}

1 - Il convient de noter que si vous masquez l'élément à l'aide display: none, il ne fonctionnera pas dans IE8 et les versions antérieures. Sachez également que jQuery validate ne valide pas les champs masqués par défaut. Si l'une de ces choses vous pose problème, voici deux méthodes différentes pour masquer l'entrée ( 1 , 2 ) qui fonctionne dans ces circonstances.

Josh Crozier
la source
43
J'ai une question avec celui-ci cependant, lors de la sélection d'un fichier, comment pourrions-nous procéder, puis afficher le nom du fichier?
Richlewis
17
Comment afficher le nom du fichier sélectionné si display: noneest défini pour input[type=file]?
Sarthak Singhal
38
Excellente solution, mais vous avez réellement besoin de Javascript. Si vous souhaitez afficher le nom du fichier, comme d'autres personnes l'ont demandé, vous devez ajouter un intervalle entre l'étiquette et l'entrée masquée: <span id = "file-selected"> </span>. Mettez ensuite à jour la portée de l'événement change: $ ('# file-upload'). Bind ('change', function () {var fileName = ''; fileName = $ (this) .val (); $ ('# fichier sélectionné '). html (fileName);})
Sam
9
Vous devez utiliser position: absolute; left: -99999remau lieu de display: nonepour des raisons d'accessibilité. La plupart du temps, les lecteurs d'écran ne liront pas les éléments s'ils sont masqués à l'aide de la display: noneméthode.
Capsule
10
Je suis très surpris de constater que personne ne semble avoir envisagé l'accessibilité au clavier. labelles éléments ne sont pas accessibles au clavier, contrairement à buttons et inputs. L'ajout tabindexn'est pas une solution car le labelne sera toujours pas actionné quand il a le focus et l'utilisateur appuie sur Entrée. J'ai résolu ce problème en masquant visuellement l'entrée, afin qu'elle puisse toujours être focalisée, puis en utilisant :focus-withinle labelparent: jsbin.com/fokexoc/2/edit?html,css,output
Oliver Joseph Ash
195

suivez ces étapes, vous pouvez créer des styles personnalisés pour votre formulaire de téléchargement de fichiers:

  1. c'est le simple formulaire HTML (veuillez lire les commentaires HTML que j'ai écrits ci-dessous)

    <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;" onclick="getFile()">Click to upload!</div>
      <!-- this is your file input tag, so i hide it!-->
      <div style='height: 0px;width:0px; overflow:hidden;'><input id="upfile" type="file" value="upload"/></div>
      <!-- here you can have file submit button or you can write a simple script to upload the file automatically-->
      <input type="submit" value='submit' >
    </form>
  2. puis utilisez ce script simple pour passer l'événement click à la balise d'entrée de fichier.

    function getFile(){
         document.getElementById("upfile").click();
    }

    Vous pouvez désormais utiliser n'importe quel type de style sans vous soucier de la façon de modifier les styles par défaut.

Je le sais très bien car j'essaie de changer les styles par défaut depuis un mois et demi. croyez-moi, c'est très difficile car différents navigateurs ont des balises d'entrée de téléchargement différentes. Utilisez donc celui-ci pour créer vos formulaires de téléchargement de fichiers personnalisés. Voici le code de TÉLÉCHARGEMENT AUTOMATISÉ complet.

function getFile() {
  document.getElementById("upfile").click();
}

function sub(obj) {
  var file = obj.value;
  var fileName = file.split("\\");
  document.getElementById("yourBtn").innerHTML = fileName[fileName.length - 1];
  document.myForm.submit();
  event.preventDefault();
}
#yourBtn {
  position: relative;
  top: 150px;
  font-family: calibri;
  width: 150px;
  padding: 10px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border: 1px dashed #BBB;
  text-align: center;
  background-color: #DDD;
  cursor: pointer;
}
<form action="#type your action here" method="POST" enctype="multipart/form-data" name="myForm">
  <div id="yourBtn" onclick="getFile()">click to upload a file</div>
  <!-- this is your file input tag, so i hide it!-->
  <!-- i used the onchange event to fire the form submission-->
  <div style='height: 0px;width: 0px; overflow:hidden;'><input id="upfile" type="file" value="upload" onchange="sub(this)" /></div>
  <!-- here you can have file submit button or you can write a simple script to upload the file automatically-->
  <!-- <input type="submit" value='submit' > -->
</form>

teshguru
la source
6
@ user1053263 -> Merci pour la recommandation .. ici j'ai utilisé un script java très simple, pas besoin d'utiliser des frameworks comme Jquery ou PrototypeJS.
teshguru
7
J'ai des problèmes pour envoyer le formulaire dans IE9. Je reçois une erreur «Accès refusé» qui tente de soumettre le formulaire via javascript. Si je clique sur le bouton soumettre via l'interface utilisateur, cela fonctionne. Y a-t-il un moyen de contourner cela?
Kevin
1
@kevin -> Veuillez essayer event.preventDefault () après document.myForm.submit (), j'ai apporté la modification au code ci-dessus.
teshguru
1
Fonctionne bien dans Chrome, Firefox, Safari et Opera - mais pas dans IE9. Dans IE9, j'obtiens la même erreur «Accès refusé» que @Kevin - et parfois juste un échec silencieux sans erreur.
daveywc
10
Dans IE10 (et éventuellement IE9, etc.), vous obtiendrez "Accès refusé" (ou aucune réponse de jQuery) si vous essayez de soumettre automatiquement le formulaire après avoir cliqué sur le bouton d'entrée de fichier via javascript. Cette méthode fonctionne donc pour styliser le bouton d'entrée de fichier tant que l'utilisateur est toujours celui qui soumet le formulaire. Cela m'a pris un certain temps pour trouver cela et je vois que d'autres ont également le même problème. Voir ceci pour plus d'informations stackoverflow.com/a/4335390/21579 .
Jeff Widmer
76

Cachez-le avec css et utilisez un bouton personnalisé avec $ (sélecteur) .cliquez sur () pour activer le bouton de navigation. puis définissez un intervalle pour vérifier la valeur du type d'entrée de fichier. l'intervalle peut afficher la valeur pour l'utilisateur afin que l'utilisateur puisse voir ce qui est téléchargé. l'intervalle s'effacera lorsque le formulaire sera soumis [EDIT] Désolé, j'ai été très occupé à mettre à jour ce post, voici un exemple

<form action="uploadScript.php" method="post" enctype="multipart/form-data">
<div>
    <!-- filename to display to the user -->
    <p id="file-name" class="margin-10 bold-10"></p>

    <!-- Hide this from the users view with css display:none; -->
    <input class="display-none" id="file-type" type="file" size="4" name="file"/>

    <!-- Style this button with type image or css whatever you wish -->
    <input id="browse-click" type="button" class="button" value="Browse for files"/>

    <!-- submit button -->
    <input type="submit" class="button" value="Change"/>
</div>

$(window).load(function () {
    var intervalFunc = function () {
        $('#file-name').html($('#file-type').val());
    };
    $('#browse-click').on('click', function () { // use .live() for older versions of jQuery
        $('#file-type').click();
        setInterval(intervalFunc, 1);
        return false;
    });
});
Ryan
la source
7
Notez que si vous utilisez cette méthode, elle se brisera dans Internet Explorer car c'est une exception de sécurité.
Rejinderi
1
merci le conseil. Lorsque j'utilise IE, il a généralement une disposition distincte pour tout le reste. DÉTESTE IE. mais je simplifie tout dans IE.
Ryan
1
Avec FF20, $ ('# file-type'). Click () ne semble pas faire apparaître le dialogue "Choose file" - en fait rien ne se passe. Des idées?
andig
2
Essayez d'utiliser la méthode de déclenchement dans jquery. Aussi .live a changé en .on () dans le nouveau jquery
Ryan
1
une fois que vous avez défini cet intervalle, à quel moment puis-je l'effacer? sinon il tirera constamment
Dave Haigh
60

HTML

<div class="new_Btn">SelectPicture</div><br>
<input id="html_btn" type='file'" /><br>

CSS

.new_Btn {
// your css propterties
}

#html_btn {
 display:none;
}

jQuery

$('.new_Btn').bind("click" , function () {
        $('#html_btn').click();
    });
//edit: 6/20/2014: Be sure to use ".on" not ".bind" for newer versions of jQuery

Violon : http://jsfiddle.net/M7BXC/

Vous pouvez également atteindre vos objectifs sans jQuery avec JavaScript normal.

Maintenant, le newBtn est lié au html_btn et vous pouvez styler votre nouveau btn comme vous le souhaitez: D

Wykk
la source
1
Juste curieux, cela fonctionne-t-il dans tous les navigateurs de nouvelle génération tels que Firefox, IE, Opera, Safari, Chrome, etc.?
Wh1T3h4Ck5
C'est la solution la plus simple pour moi! Au moins dans IE 9, Chrome 23 et FF 16 avec jQuery 1.7.2, donc avec les versions mises à jour, cela devrait fonctionner.
Dani BISHOP
Est-ce que quelqu'un sait comment changer le .new_Btn au cas où l'utilisateur aurait choisi une image. Maintenant, il montre juste la même classe. Quelqu'un sait comment suivre cela? Merci
Ando
2
@MehdiKaramosly, cela fonctionne même sur IE 6 - mais cela n'est vrai que jusqu'à jQuery 1.x , jQuery 2.x + ne prend pas en charge les anciens IE
jave.web
1
@Ando via Javascript / jQuery => la valeur de l'entrée de fichier est vide ou contient le chemin du fichier local => utilisez l'événement onchange et testez val () :) voir jsfiddle.net/ZrBPF
jave.web
55

Tous les moteurs de rendu génèrent automatiquement un bouton lors de la création d'un <input type="file">. Historiquement, ce bouton n'a pas été stylisé. Cependant, Trident et WebKit ont ajouté des crochets via des pseudo-éléments.

Trident

Depuis IE10, le bouton d'entrée de fichier peut être stylisé à l'aide du ::-ms-browsepseudo-élément. Fondamentalement, toutes les règles CSS que vous appliquez à un bouton standard peuvent être appliquées au pseudo-élément. Par exemple:

::-ms-browse {
  background: black;
  color: red;
  padding: 1em;
}
<input type="file">

Cela s'affiche comme suit dans IE10 sur Windows 8:

Cela s'affiche comme suit dans IE10 sur Windows 8:

WebKit

WebKit fournit un crochet pour son bouton d'entrée de fichier avec le ::-webkit-file-upload-buttonpseudo-élément. Encore une fois, presque toutes les règles CSS peuvent être appliquées, par conséquent l'exemple Trident fonctionnera également ici:

::-webkit-file-upload-button {
  background: black;
  color: red;
  padding: 1em;
}
<input type="file">

Cela s'affiche comme suit dans Chrome 26 sur OS X:

Cela s'affiche comme suit dans Chrome 26 sur OS X:

Anselme
la source
Il n'y a pas de possibilités de style spéciales pour les programmes basés sur Gecko comme Firefox.
Anselm
2
Dans votre réponse, à l'aide de CSS, comment masquer le mot "Aucun fichier choisi" dans la balise <input type = file>. Veuillez me commenter.
user2086641
Je n'en ai aucune idée, désolé
Anselm
1
source: tjvantoll.com/2013/04/15/…
Anselm
1
Au cas où quelqu'un voudrait jouer avec les styles, j'ai ajouté un jsfidde ici: jsfiddle.net/peter_drinnan/r0gq6kw2
Peter Drinnan
26

Si vous utilisez Bootstrap 3, cela a fonctionné pour moi:

Voir http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/

.btn-file {
  position: relative;
  overflow: hidden;
}
.btn-file input[type=file] {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 100%;
  min-height: 100%;
  font-size: 100px;
  text-align: right;
  filter: alpha(opacity=0);
  opacity: 0;
  outline: none;
  background: white;
  cursor: inherit;
  display: block;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<span class="btn btn-primary btn-file">
    Browse...<input type="file">
</span>

Ce qui produit le bouton d'entrée de fichier suivant:

Exemple de bouton

Sérieusement, consultez http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/

JDawg
la source
2
Cela préserve la fonctionnalité de glisser-déposer, ce qui est génial :), la plupart des réponses n'acceptent pas les fichiers déposés.
A1rPun
25

Exemple de travail ici avec prise en charge native du glisser-déposer: https://jsfiddle.net/j40xvkb3/

Lors du style d'une entrée de fichier, vous ne devez interrompre aucune des interactions natives fournies par l'entrée .

L' display: noneapproche rompt le support natif du glisser-déposer.

Pour ne rien casser, vous devez utiliser l' opacity: 0approche pour l'entrée et la positionner en utilisant un modèle relatif / absolu dans un wrapper.

En utilisant cette technique, vous pouvez facilement styliser une zone de clic / dépôt pour l'utilisateur et ajouter une classe personnalisée en javascript sur dragenterévénement pour mettre à jour les styles et donner à l'utilisateur un retour pour lui permettre de voir qu'il peut déposer un fichier.

HTML:

<label for="test">
  <div>Click or drop something here</div>
  <input type="file" id="test">
</label>

CSS:

input[type="file"] {
  position: absolute;
  left: 0;
  opacity: 0;
  top: 0;
  bottom: 0;
  width: 100%;
}

div {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ccc;
  border: 3px dotted #bebebe;
  border-radius: 10px;
}

label {
  display: inline-block;
  position: relative;
  height: 100px;
  width: 400px;
}

Voici un exemple de travail (avec JS supplémentaire pour gérer les dragoverévénements et les fichiers déposés).

https://jsfiddle.net/j40xvkb3/

J'espère que cela vous a aidé!

kevcha
la source
merci pour le post, comment cela fonctionne-t-il si l'attribut multiple = "multiple" est ajouté, j'ai fait glisser 2 images mais je
n'ai
Vous avez manqué le code ici. Il y a plus sur le violon. Quelle bibliothèque?
ctrl-alt-delor
Il y a juste du javascript sur le violon avec jQuery pour afficher les fichiers qui ont été déposés. C'est tout
kevcha
Après avoir implémenté et testé cette solution, elle ne semble pas fonctionner non plus dans Edge.
ChrisA
1
Ah ok, j'ai raté le wrapper avec la position relative dans votre réponse - Mon mauvais. Si l'entrée est inférieure aux dimensions de l'écran, le navigateur essaie de la faire défiler et, ce faisant, déplace le conteneur de défilement vers le haut de la page. Voici une démonstration: stackblitz.com/edit/input-file-overflow?file=style.css (tout simplement pas exactement comment la position absolue est la cause du comportement)
Tom
23

Je peux le faire avec du CSS pur en utilisant le code ci-dessous. J'ai utilisé bootstrap et font-awesome.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />

<label class="btn btn-default btn-sm center-block btn-file">
  <i class="fa fa-upload fa-2x" aria-hidden="true"></i>
  <input type="file" style="display: none;">
</label>

Karthik
la source
21
 <label>
    <input type="file" />
 </label>

Vous pouvez envelopper votre type d'entrée = "fichier" à l'intérieur d'une étiquette pour l'entrée. Donnez un style à l'étiquette comme vous le souhaitez et masquez l'entrée avec display: none;

JGuo
la source
Une alternative pourrait être gist.github.com/barneycarroll/5244258 ou jsfiddle.net/4cwpLvae (fonctionne dans IE11)
surfmuggle
12

Voici une solution qui ne stylise pas vraiment l' <input type="file" />élément mais utilise à la place un <input type="file" />élément au-dessus d'autres éléments (qui peuvent être stylisés). L' <input type="file" />élément n'est pas vraiment visible par conséquent, l'illusion générale est d'un contrôle de téléchargement de fichiers bien conçu.

J'ai rencontré ce problème récemment et malgré la pléthore de réponses sur Stack Overflow, aucune ne semblait vraiment correspondre à la facture. Au final, j'ai fini par le personnaliser afin d'avoir une solution simple et élégante.

J'ai également testé cela sur Firefox, IE (11, 10 et 9), Chrome et Opera, iPad et quelques appareils Android.

Voici le lien JSFiddle -> http://jsfiddle.net/umhva747/

$('input[type=file]').change(function(e) {
    $in = $(this);
    $in.next().html($in.val());
    
});

$('.uploadButton').click(function() {
    var fileName = $("#fileUpload").val();
    if (fileName) {
        alert(fileName + " can be uploaded.");
    }
    else {
        alert("Please select a file to upload");
    }
});
body {
    background-color:Black;
}

div.upload {
    background-color:#fff;
    border: 1px solid #ddd;
    border-radius:5px;
    display:inline-block;
    height: 30px;
    padding:3px 40px 3px 3px;
    position:relative;
    width: auto;
}

div.upload:hover {
    opacity:0.95;
}

div.upload input[type="file"] {
    display: input-block;
    width: 100%;
    height: 30px;
    opacity: 0;
    cursor:pointer;
    position:absolute;
    left:0;
}
.uploadButton {
    background-color: #425F9C;
    border: none;
    border-radius: 3px;
    color: #FFF;
    cursor:pointer;
    display: inline-block;
    height: 30px;
    margin-right:15px;
    width: auto;
    padding:0 20px;
    box-sizing: content-box;
}

.fileName {
    font-family: Arial;
    font-size:14px;
}

.upload + .uploadButton {
    height:38px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form action="" method="post" enctype="multipart/form-data">
    <div class="upload">
        <input type="button" class="uploadButton" value="Browse" />
        <input type="file" name="upload" accept="image/*" id="fileUpload" />
        <span class="fileName">Select file..</span>
    </div>
    <input type="button" class="uploadButton" value="Upload File" />
</form>

J'espère que cela t'aides!!!

Satwik Nadkarny
la source
2
Une solution ingénieusement intelligente à ces manigances de style de téléchargement de fichiers néfastes.
rmcsharry
Le meilleur de tous. Parfait!!
Karra
11

C'est simple avec jquery. Pour donner un exemple de code de la suggestion de Ryan avec une légère modification.

HTML de base:

<div id="image_icon"></div>
<div id="filename"></div>
<input id="the_real_file_input" name="foobar" type="file">

Assurez-vous de définir le style sur l'entrée lorsque vous êtes prêt: opacity: 0 vous ne pouvez pas définir display: nonecar il doit être cliquable. Mais vous pouvez le positionner sous le bouton "nouveau" ou rentrer sous autre chose avec z-index si vous préférez.

Configurez du jquery pour cliquer sur l'entrée réelle lorsque vous cliquez sur l'image.

$('#image_icon').click(function() {
    $('#the_real_file_input').click();
});

Maintenant, votre bouton fonctionne. Il suffit de couper et coller la valeur lorsqu'elle est modifiée.

$('input[type=file]').bind('change', function() {
    var str = "";
    str = $(this).val();
    $("#filename").text(str);
}).change();

Tah dah! Vous devrez peut-être analyser le val () pour quelque chose de plus significatif, mais vous devriez être prêt.

TLK
la source
1
cela échouera avec FF11 - raison: puisque vous ne pouvez pas influencer précisément la taille du champ de saisie (uniquement en utilisant la taille html) et le bouton (vous pouvez définir la hauteur à l'aide de css), si votre champ de saisie visible est plus grand que FF nous le fournit, vous se retrouvent avec une très grande zone aveugle - point de vue de l'utilisateur: dans la plupart des cas, il se plaindra que le téléchargement ne fonctionne pas, lorsqu'il est cliqué
Jeffz
2
Bonne idée mais cela ne fonctionnera pas sur IE. $ ('# the_real_file_input'). click () déclenchera une boîte de dialogue ouverte mais le fichier ne sera pas sélectionné dans un formulaire et le téléchargement échouera.
Tomas
11

Mettez le bouton de téléchargement de fichier sur votre joli bouton ou élément et cachez-le.

Très simple et fonctionnera sur n'importe quel navigateur

<div class="upload-wrap">
    <button type="button" class="nice-button">upload_file</button>
    <input type="file" name="file" class="upload-btn">
</div>

modes

.upload-wrap {
    position: relative;
}

.upload-btn {
    position: absolute;
    left: 0;
    opacity: 0;
}
Tigran Babajanyan
la source
8

VISIBILITÉ: TRICK caché

Je fais généralement le visibility:hiddentour

c'est mon bouton stylisé

<div id="uploadbutton" class="btn btn-success btn-block">Upload</div>

il s'agit du bouton type d'entrée = fichier. Notez la visibility:hiddenrègle

<input type="file" id="upload" style="visibility:hidden;">

c'est le bit JavaScript pour les coller ensemble. Ça marche

<script>
 $('#uploadbutton').click(function(){
    $('input[type=file]').click();
 });
 </script>
Gianluca Ghettini
la source
1
vous ne pouvez pas utiliser la méthode click () pour déclencher un événement pour le fichier de type d'entrée. la plupart du navigateur ne permet pas pour des raisons de sécurité
Mahi
même en utilisant jquery? Est-ce exact? comment le feriez-vous à la place?
Gianluca Ghettini
style="visibility:hidden"est trop long, utilisez simplement hidden. En outre, click()cela fonctionne pour tous les navigateurs et il n'y a aucune raison de sécurité très fiable pour l'instant et sur tous les appareils, c'est la manière légitime et @Gianluca pour une utilisation classique de jQuerytrigger()
Thielicious
1
C'est précisément la solution que j'allais ajouter à cela! Cela fonctionne et vous pouvez l'afficher exactement comme vous le souhaitez. Fonctionne avec Chrome, en essayera d'autres.
markthewizard1234
7

la seule façon dont je peux penser est de trouver le bouton avec javascript après son rendu et de lui attribuer un style

vous pourriez également regarder ce résumé

romain m
la source
CSS pur, pas de JavaScript, fonctionne dans tous les navigateurs jusqu'à ie7 - génial!
Simon Steinberger
7
<input type="file" name="media" style="display-none" onchange="document.media.submit()">

J'utiliserais normalement du javascript simple pour personnaliser la balise d'entrée de fichier. Un champ de saisie caché, en cliquant sur le bouton, javascript appelle le champ caché, une solution simple sans aucun CSS ou tas de jquery.

<button id="file" onclick="$('#file').click()">Upload File</button>
user2086641
la source
1
vous ne pouvez pas utiliser la click()méthode pour déclencher l'événement pour le fichier de type d'entrée. la plupart du navigateur ne permet pas pour des raisons de sécurité.
Mahi
6

Ici, nous utilisons une étendue pour déclencher l'entrée du fichier de type et nous avons simplement personnalisé cette étendue , afin que nous puissions ajouter n'importe quel style en utilisant cette méthode.

Notez que nous utilisons une balise d'entrée avec l'option visibilité: cachée et la déclenchons dans l'intervalle.

.attachFileSpan{
color:#2b6dad;
cursor:pointer;
}
.attachFileSpan:hover{
text-decoration: underline;
}
<h3> Customized input of type file </h3>
<input id="myInput" type="file" style="visibility:hidden"/>

        <span title="attach file" class="attachFileSpan" onclick="document.getElementById('myInput').click()">
        Attach file
        </span>

Référence

Abdallah Okasha
la source
5

C'est une bonne façon de le faire avec le téléchargement de matériel / fichier angulaire. Vous pouvez faire de même avec un bouton d'amorçage.

Remarque que j'ai utilisé à la <a>place de <button>cela permet aux événements de clic de bouillonner.

<label>
    <input type="file" (change)="setFile($event)" style="display:none" />

    <a mat-raised-button color="primary">
      <mat-icon>file_upload</mat-icon>
      Upload Document
    </a>

  </label>
Robert King
la source
1
Cela fonctionne très bien dans angulaire 2+. Je ne sais pas pourquoi il a été rejeté. Si vous utilisez angulaire, c'est la solution la plus simple disponible.
AndrewWhalan
4

SEULEMENT CSS

Utilisez ce très simple et FACILE

Html:

<label>Attach your screenshort</label>
                <input type="file" multiple class="choose">

Css:

.choose::-webkit-file-upload-button {
    color: white;
    display: inline-block;
    background: #1CB6E0;
    border: none;
    padding: 7px 15px;
    font-weight: 700;
    border-radius: 3px;
    white-space: nowrap;
    cursor: pointer;
    font-size: 10pt;
}
Balvant Ahir
la source
4

Peut-être beaucoup d'awns. Mais j'aime ça en CSS pur avec des fa-boutons:

.divs {
    position: relative;
    display: inline-block;
    background-color: #fcc;
}

.inputs {
    position:absolute;
    left: 0px;
    height: 100%;
    width: 100%;
    opacity: 0;
    background: #00f;
    z-index:999;
}

.icons {
    position:relative;
}
<div class="divs">
<input type='file' id='image' class="inputs">
<i class="fa fa-image fa-2x icons"></i>
</div>

<div class="divs">
<input type='file' id='book' class="inputs">
<i class="fa fa-book fa-5x icons"></i>
</div>
<br><br><br>
<div class="divs">
<input type='file' id='data' class="inputs">
<i class="fa fa-id-card fa-3x icons"></i>
</div>





<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

Violon: https://jsfiddle.net/zoutepopcorn/v2zkbpay/1/

Johan Hoeksma
la source
4

Ne vous laissez pas berner par les "excellentes" solutions CSS uniquement qui sont en fait très spécifiques au navigateur, ou qui superposent le bouton stylé au-dessus du vrai bouton, ou qui vous obligent à utiliser un <label>au lieu d'un <button>, ou tout autre hack . JavaScript EST nécessaire pour le faire fonctionner pour une utilisation générale. Veuillez étudier comment gmail et DropZone le font si vous ne me croyez pas.

Stylisez simplement un bouton normal comme vous le souhaitez, puis appelez une simple fonction JS pour créer et lier un élément d'entrée masqué à votre bouton stylisé.

<!DOCTYPE html>
<meta charset="utf-8">

<style>
    button {
        width            : 160px;
        height           : 30px;
        font-size        : 13px;
        border           : none;
        text-align       : center;
        background-color : #444;
        color            : #6f0;
    }
    button:active {
        background-color : #779;
    }
</style>

<button id="upload">Styled upload button!</button>

<script>

function Upload_On_Click(id, handler) {
    var hidden_input = null;
    document.getElementById(id).onclick = function() {hidden_input.click();}
    function setup_hidden_input() {
        hidden_input && hidden_input.parentNode.removeChild(hidden_input);
        hidden_input = document.createElement("input");
        hidden_input.setAttribute("type", "file");
        hidden_input.style.visibility = "hidden";
        document.querySelector("body").appendChild(hidden_input);
        hidden_input.onchange = function() {
            handler(hidden_input.files[0]);
            setup_hidden_input();
        };
    }
    setup_hidden_input();
}

Upload_On_Click("upload", function(file) {
    console.log("GOT FILE: " + file.name);
});

</script>

Remarquez comment le code ci-dessus le lie de nouveau après chaque fois que l'utilisateur choisit un fichier. Ceci est important car "onchange" n'est appelé que si l'utilisateur change le nom du fichier. Mais vous voudrez probablement obtenir le fichier chaque fois que l'utilisateur le fournira.

personal_cloud
la source
1
Pour être exact, l' labelapproche fonctionne, sauf qu'elle ne peut pas afficher le nom ou le chemin du fichier sélectionné. Donc, nécessairement, c'est le seul problème que JS a besoin de résoudre.
Hassan Baig
4

Solution de fichiers multiples avec nom de fichier converti

EXEMPLE Bootstrap

HTML:

<div>
  <label class="btn btn-primary search-file-btn">
    <input name="file1" type="file" style="display:None;"> <span>Choose file</span>
  </label>
  <span>No file selected</span>
</div>

<div>
  <label class="btn btn-primary search-file-btn">
    <input name="file2" type="file" style="display:None;"> <span>Choose file</span>
  </label>
  <span>No file selected</span>
</div>

1. JS avec jQuery:

$().ready(function($){
    $('.search-file-btn').children("input").bind('change', function() {
    var fileName = '';
    fileName = $(this).val().split("\\").slice(-1)[0];
    $(this).parent().next("span").html(fileName);
  })
});

2. JS sans jQuery

Array.prototype.forEach.call(document.getElementsByTagName('input'), function(item) {
  item.addEventListener("change", function() {
    var fileName = '';
    fileName = this.value.split("\\").slice(-1)[0];
    this.parentNode.nextElementSibling.innerHTML = fileName;
  });
});
ChrisRob
la source
3

Voici une solution, qui montre également le nom de fichier choisi: http://jsfiddle.net/raft9pg0/1/

HTML:

<label for="file-upload" class="custom-file-upload">Chose file</label>
<input id="file-upload" type="file"/>
File: <span id="file-upload-value">-</span>

JS:

$(function() {
    $("input:file[id=file-upload]").change(function() {
        $("#file-upload-value").html( $(this).val() );
    });
});

CSS:

input[type="file"] {
    display: none;
}

.custom-file-upload {
      background: #ddd;
      border: 1px solid #aaa;
      border-top: 1px solid #ccc;
      border-left: 1px solid #ccc;
      -moz-border-radius: 3px;
      -webkit-border-radius: 3px;
      border-radius: 3px;
      color: #444;
      display: inline-block;
      font-size: 11px;
      font-weight: bold;
      text-decoration: none;
      text-shadow: 0 1px rgba(255, 255, 255, .75);
      cursor: pointer;
      margin-bottom: 20px;
      line-height: normal;
      padding: 8px 10px; }
Caleb
la source
Comment afficher uniquement le nom du fichier et non le fakepathchemin?
Hassan Baig
3

Cette semaine, j'ai également dû personnaliser le bouton et afficher le nom de fichier sélectionné à côté, donc après avoir lu certaines des réponses ci-dessus (merci BTW), j'ai trouvé l'implémentation suivante:

HTML:

<div class="browse">
<label id="uploadBtn" class="custom-file-upload">Choose file
<input type="file" name="fileInput" id="fileInput" accept=".yaml" ngf-select ngf-change="onFileSelect($files)" />
</label>
<span>{{fileName}}</span>
</div>

CSS

   input[type='file'] {
    color: #a1bbd5;
    display: none;

}

.custom-file-upload {
    border: 1px solid #a1bbd5;
    display: inline-block;
    padding: 2px 8px;
    cursor: pointer;
}

label{
    color: #a1bbd5;
    border-radius: 3px;
}

Javascript (angulaire)

app.controller('MainCtrl', function($scope) {

        $scope.fileName = 'No file chosen';

          $scope.onFileSelect = function ($files) {
          $scope.selectedFile = $files;
          $scope.fileName = $files[0].name;
    };
});

Fondamentalement, je travaille avec la bibliothèque ng-file-upload, angulairement, je lie le nom de fichier à ma portée $ et lui donne la valeur initiale de 'Aucun fichier choisi', je lie également la fonction onFileSelect () à ma portée, donc quand un fichier est sélectionné, j'obtiens le nom de fichier en utilisant l'API ng-upload et l'assigne au $ scope.filename.

liron_hazan
la source
3

Simulez simplement un clic sur le <input>en utilisant la trigger()fonction lorsque vous cliquez sur un style <div>. J'ai créé mon propre bouton à partir d'un <div>, puis j'ai déclenché un clic sur inputlorsque je clique sur mon <div>. Cela vous permet de créer votre bouton comme vous le souhaitez car il s'agit d'un <div>et simule un clic sur votre fichier <input>. Ensuite, utilisez display: nonesur votre <input>.

// div styled as my load file button
<div id="simClick">Load from backup</div>

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

// Click function for input
$("#readFile").click(function() {
    readFile();
});

// Simulate click on the input when clicking div
$("#simClick").click(function() {
    $("#readFile").trigger("click");
});
James Marquez
la source
3

La meilleure façon est d'utiliser le pseudo-élément: après ou: avant comme élément sur l'entrée de dé. Ensuite, stylisez ce pseudo-élément comme vous le souhaitez. Je vous recommande de faire comme style général pour tous les fichiers d'entrée comme suit:

input {
  height: 0px;
  outline: none;
}

input[type="file"]:before {
  content: "Browse";
  background: #fff;
  width: 100%;
  height: 35px;
  display: block;
  text-align: left;
  position: relative;
  margin: 0;
  margin: 0 5px;
  left: -6px;
  border: 1px solid #e0e0e0;
  top: -1px;
  line-height: 35px;
  color: #b6b6b6;
  padding-left: 5px;
  display: block;
}
Despertaweb
la source
3

Le meilleur moyen que j'ai trouvé est de le input type: filerégler sur display: none. Donnez-lui un id. Créez un bouton ou tout autre élément pour ouvrir l'entrée de fichier.

Ajoutez ensuite un écouteur d'événements (bouton) qui, lorsque vous cliquez dessus, simule un clic sur l'entrée du fichier d'origine. Comme cliquer sur un bouton nommé bonjour mais cela ouvre une fenêtre de fichier.

Exemple de code

//i am using semantic ui

<button class="ui circular icon button purple send-button" id="send-btn">
      <i class="paper plane icon"></i>
    </button>
  <input type="file" id="file" class="input-file" />

javascript

var attachButton=document.querySelector('.attach-button');
    attachButton.addEventListener('click', e=>{
        $('#file').trigger("click")
    })
Taio
la source
2

css peut faire beaucoup ici ... avec un peu de ruse ...

<div id='wrapper'>
  <input type='file' id='browse'>
</div>

#wrapper {
     width: 93px; /*play with this value */
     height: 28px; /*play with this value */
     background: url('browseBtn.png') 0 0 no-repeat;
     border:none;
     overflow:hidden;
}

#browse{
     margin-left:-145px; /*play with this value */
     opacity:0; /* set to .5 or something so you can better position it as an overlay then back to zero again after you're done */
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
     filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
}

:: référence :: http://site-o-matic.net/?viewpost=19

-une abbaye

une abbaye
la source
2

J'ai trouvé une méthode très simple pour basculer le bouton de fichier sur une image. Vous venez d'étiqueter une image et de la placer sur le bouton du fichier.

<html>
<div id="File button">
    <div style="position:absolute;">
        <!--This is your labeled image-->
        <label for="fileButton"><img src="ImageURL"></label>
    </div>
    <div>
        <input type="file" id="fileButton"/>
    </div>
</div>
</html>

Lorsque vous cliquez sur l'image étiquetée, vous sélectionnez le bouton de fichier.

D-Inventor
la source
2

Seule cette approche vous donne toute la flexibilité! ES6 / VanillaJS!

html:

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

javascript:

document.querySelector('button').addEventListener('click', () => {
  document.querySelector('input[type="file"]').click();
});

Cela masque le bouton du fichier d'entrée, mais sous le capot, il clique sur un autre bouton normal, que vous pouvez évidemment styler comme n'importe quel autre bouton. C'est la seule solution sans inconvénient en dehors d'un nœud DOM inutile. Grâce à display:none;, le bouton de saisie ne réserve aucun espace visible dans le DOM.

(Je ne sais plus à qui donner des accessoires pour cela. Mais j'ai eu cette idée quelque part ici sur Stackoverflow.)

codepleb
la source