Style un input type="file" bouton

Comment le style de l'entrée type="file" bouton.

533
demandé sur Joeytje50 2009-02-21 13:36:49

30 réponses

Les entrées de fichier de style

sont notoirement difficiles, car la plupart des navigateurs ne modifieront pas l'apparence de CSS ou 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 taille:

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

pour tout style plus sophistiqué que celui-là (par exemple changer l'apparence du bouton browse), vous aurez besoin de regarder l'approche épurée de la superposition d'un bouton stylé et d'une boîte de saisie sur l'entrée du fichier natif. L'article déjà mentionné par rm à www.quirksmode.org/dom/inputfile.html est le meilleur que j'ai vu.

164
répondu Jonathan Moffatt 2011-10-06 04:51:10

vous n'avez pas besoin de JavaScript pour cela! Voici une solution cross-browser:

voir cet exemple! - il fonctionne en Chrome / FF / IE - (IE10/9/8/7)

la meilleure approche serait d'avoir un élément d'étiquette personnalisé avec un attribut for attaché à un élément d'entrée de fichier caché . (L'attribut for du label doit correspondre à l'élément id du fichier." pour que cela fonctionne).

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

comme alternative, vous pouvez aussi simplement envelopper l'élément d'entrée de fichier avec une étiquette directement: (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 en utilisant le sélecteur d'attribut .

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

alors tout ce que vous devez faire est le style de la coutume label élément. (exemple) .

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

1 - il est intéressant de noter que si vous cachez l'élément en utilisant display: none , il ne fonctionnera pas dans IE8 et en dessous. Sachez également que jQuery valide ne valide pas les champs cachés par défaut. Si l'une ou l'autre de ces choses est un problème pour vous, voici deux méthodes différentes pour se cacher l'entrée ( 1 , 2 ) ça marche dans ces circonstances.

763
répondu Josh Crozier 2017-05-23 12:26:38

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

1.) ceci est le formulaire html simple(s'il vous plaît lire les commentaires html que j'ai écrit ici 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 de clic à étiquette d'entrée de fichier.

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

maintenant, vous pouvez utiliser n'importe quel type d'un style sans se soucier de savoir comment changer les styles par défaut. je le sais très bien, parce que j'ai été j'essaie de changer les styles par défaut pour un mois et demi. croyez-moi, c'est très difficile parce que différents navigateurs ont des étiquettes d'entrée de téléchargement différentes. Utilisez donc celui-ci pour construire vos formulaires personnalisés de téléchargement de fichier.Voici le code de téléchargement automatisé complet.

<html>
<head>
<style>
#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;
  }
</style>
<script type="text/javascript">
 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();
  }
</script>
</head>
<body>
<center>
<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>
</center>
</body>
</html>

profitez-en!

Have a Nice Day,

174
répondu teshguru 2018-05-11 23:10:16

le cacher avec css et utiliser un bouton personnalisé avec $(selector).cliquez sur() pour activer le bouton parcourir. ensuite, définissez un intervalle pour vérifier la valeur du type d'entrée du fichier. l'intervalle peut afficher la valeur pour l'utilisateur, de sorte que l'utilisateur peut voir ce qui se téléchargés. L'intervalle sera clair lorsque le formulaire est soumis [EDIT] Désolé, j'ai été très occupé voulait dire 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;
    });
});
73
répondu Ryan 2013-04-26 12:55:38

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

Fiddle : http://jsfiddle.net/M7BXC/

vous pouvez atteindre vos objectifs aussi sans jQuery avec JavaScript normal.

maintenant le newBtn est linkes avec le html_btn et vous pouvez styliser votre nouveau btn comme vous voulez :d

55
répondu Wykk 2014-06-20 23:33:40

tous les moteurs de rendu génèrent automatiquement un bouton lorsqu'un <input type="file"> est créé. Historiquement, ce bouton n'a jamais été styleable. Cependant, Trident et WebKit ont ajouté des crochets via des pseudo-éléments.

Trident

à partir de IE10, le bouton d'entrée de fichier peut être coiffé en utilisant le pseudo-élément ::-ms-browse . Fondamentalement, n'importe quelles règles CSS que vous appliquez à un bouton régulier peut être appliqué à la le 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:

This displays as follows in IE10 on Windows 8:

WebKit

WebKit fournit un crochet pour son bouton d'entrée de fichier avec le pseudo-élément ::-webkit-file-upload-button . Encore une fois, à peu près n'importe quelle règle CSS peut être appliquée, donc L'exemple Trident fonctionnera ici aussi bien:

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

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

This displays as follows in Chrome 26 on OS X:

48
répondu Anselm 2016-10-04 18:03:47
 <label>
    <input type="file" />
 </label>

vous pouvez envelopper votre type d'entrée=" file " à l'intérieur d'une étiquette pour l'entrée. Style l'étiquette cependant vous souhaitez et cacher l'entrée avec display: none;

20
répondu JGuo 2012-08-23 01:33:57

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>

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

Example button

sérieusement, check out http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3 /

19
répondu JDawg 2016-08-18 17:35:54

je suis en mesure de le faire avec pur CSS à l'aide de 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>
18
répondu Karthik 2016-12-30 08:14:15

c'est simple avec jquery. Pour donner un exemple de code de Ryan la suggestion 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: none parce qu'il doit être cliquable. Mais vous pouvez le placer sous le bouton "Nouveau" ou le mettre sous autre chose avec z-index si vous préférez.

le programme d'Installation certains jquery pour cliquer la vraie entrée lorsque vous cliquez sur l'image.

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

maintenant votre bouton fonctionne. Suffit de couper et coller la valeur lorsqu'elles sont modifiées.

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

Tah dah! Vous pouvez avoir besoin de parser le val() à quelque chose de plus significatif mais vous devriez être prêt.

11
répondu TLK 2017-05-23 12:10:44

TLDR; Exemple de travail ici avec le soutien de glisser-déposer natif: https://jsfiddle.net/ms3bbazv/4 /

lors de la conception d'une entrée de fichier, vous ne devez briser aucune des interactions natives l'entrée donne.

l'approche display: none casse le support natif de drag and drop.

pour ne pas casser quoi que ce soit, vous devriez utiliser l'approche opacity: 0 pour l'entrée, et le positionner en utilisant relatif / motif absolu dans un emballage.

en utilisant cette technique, vous pouvez facilement style un click / drop zone pour l'utilisateur, et ajouter 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 des JS supplémentaires pour gérer l'événement dragover et les fichiers supprimés).

https://jsfiddle.net/ms3bbazv/4 /

Espère que cela a aidé !

10
répondu kevcha 2018-02-06 14:16:53

VISIBILITY: hidden TRICK

j'opte habituellement pour le visibility:hidden trick

c'est mon bouton stylé

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

c'est le bouton type d'entrée=fichier. Notez le visibility:hidden règle

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

c'est le bit JavaScript pour les coller ensemble. Il fonctionne

<script>
 $('#uploadbutton').click(function(){
    $('input[type=file]').click();
 });
 </script>
8
répondu Gianluca Ghettini 2016-10-16 14:58:09

la seule façon dont je peux penser est de trouver le bouton avec javascript après qu'il soit rendu et lui assigner un style

, vous pouvez aussi regarder cet article intitulée

7
répondu roman m 2009-02-21 10:41:05
<input type="file" name="media" style="display-none" onchange="document.media.submit()">

j'utiliserais normalement javascript simple pour personnaliser la balise d'entrée de fichier.Un champ d'entrée caché, en cliquant sur le bouton, javascript appeler le champ caché, solution simple avec n'importe quel css ou tas de jquery.

<button id="file" onclick="$('#file').click()">Upload File</button>
7
répondu user2086641 2013-08-13 19:48:58

Voici une solution qui ne style pas vraiment l'élément <input type="file" /> mais utilise plutôt un élément <input type="file" /> au-dessus d'autres éléments (qui peuvent être stylisés). L'élément <input type="file" /> n'est pas vraiment visible donc, l'illusion générale est un contrôle de téléchargement de fichier de style agréable.

je suis tombé sur ce problème récemment et malgré la pléthore de réponses sur le débordement de la pile, aucun ne semblait vraiment correspondre à la facture. En fin de compte, j'ai fini par personnaliser ceci pour simple et une solution élégante.

j'ai également testé cela sur Firefox, IE (11, 10 & 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>

Espérons que cette aide!!!

7
répondu Satwik Nadkarny 2015-01-30 20:35:47

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; }
3
répondu Caleb 2014-10-15 12:15:17

Cette semaine, j'ai également eu besoin de personnaliser le bouton et d'afficher le nom de fichier sélectionné à part elle, donc après la lecture de certaines des réponses ci-dessus (merci BTW) je suis venu avec 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 (Angular)

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 ng-file-upload lib, angle-wise je lie le nom de fichier à mon $ scope et donner c'est la valeur initiale de 'No file chosen', je lie également la fonction onFileSelect() à mon scope, donc quand un fichier est sélectionné, je reçois le nom du fichier en utilisant l'API ng-upload et je l'attribue à $scope.filename.

3
répondu lironn 2015-07-13 09:06:33

peut-être beaucoup d'aubergistes. Mais j'aime cela dans CSS pur avec fa-buttons:

.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/

3
répondu Johan Hoeksma 2017-07-16 17:06:37

c'est une bonne façon de le faire avec le téléchargement de fichier matériel / angulaire. Vous pourriez faire la même chose avec un bouton bootstrap.

Note j'ai utilisé <a> au lieu de <button> cela permet aux événements de clic à faire des bulles.

<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>
3
répondu robert king 2017-11-13 23:09:13

ici, nous utilisons une portée pour déclencher l'entrée du fichier de type et nous avons simplement personnalisé cette portée , de sorte que nous pouvons ajouter n'importe quel style en utilisant cette façon.

Note que nous utilisons l'étiquette d'entrée avec visibility:hidden option et que nous la déclenchons dans la portée.

.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

3
répondu Abdallah Okasha 2018-01-08 06:26:05

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

-Abbaye

2
répondu Abbey 2012-06-20 21:16:48

j'ai trouvé une méthode très simple pour passer le bouton fichier à une image. Il suffit d'étiqueter une image et de la placer sur le bouton file.

<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>

en cliquant sur l'image étiquetée, vous sélectionnez le bouton fichier.

2
répondu D-Inventor 2013-09-04 07:08:50

SEULEMENT CSS

utiliser 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;
}
2
répondu Balvant Ahir 2016-06-03 13:00:08

ne vous laissez pas duper par les" grandes "solutions CSS-seulement qui sont en fait très spécifiques au navigateur, ou qui superposent le bouton stylé sur le bouton réel, ou qui vous forcent à utiliser un <label> au lieu d'un <button> , ou tout autre piratage de ce genre. JavaScript est nécessaire pour le faire fonctionner pour l'usage général. S'il vous plaît, étudiez comment gmail et DropZone le font si vous ne me croyez pas.

il suffit de styliser un bouton normal comme vous voulez, puis appeler une fonction JS simple pour créer et liez un élément d'entrée caché à votre bouton stylé.

<!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 re-relie 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 voulez probablement obtenir le fichier chaque fois que l'utilisateur le fournit.

2
répondu personal_cloud 2017-09-09 06:34:38

Voici une solution css simple, qui crée une zone cible cohérente, et vous permet de coiffer vos faux éléments comme vous le souhaitez.

l'idée de base est celle-ci:

  1. ont deux éléments "faux" (une entrée de texte/Lien) comme frères et sœurs à votre entrée de fichier réelle. Positionnez-les de façon à ce qu'ils soient exactement au-dessus de votre zone cible.
  2. enveloppez votre entrée de fichier avec un div. Définir overflow à hidden (de sorte que l'entrée de fichier ne se renverse), et de faire exactement la même taille que vous voulez que votre zone cible.
  3. définit l'opacité à 0 sur l'entrée du fichier de sorte qu'il est caché mais toujours cliquable. Lui donner une grande taille de police de sorte que vous pouvez cliquer sur toutes les parties de la zone cible.

voici le jsfiddle: http://jsfiddle.net/gwwar/nFLKU /

<form>
    <input id="faux" type="text" placeholder="Upload a file from your computer" />
    <a href="#" id="browse">Browse </a>
    <div id="wrapper">
        <input id="input" size="100" type="file" />
    </div>
</form>
1
répondu Kerry Liu 2013-03-02 21:46:12

une solution vraiment intelligente en utilisant jQuery qui fonctionne dans tous les navigateurs plus anciens ainsi que dans les nouveaux, j'ai trouvé ici . Il s'occupe de tous les problèmes de style et click (), en utilisant le bouton fichier browse. J'ai fait une version javascript simple: fiddle La solution est aussi simple que le génie: rendre le fichier d'entrée invisible, et utiliser un morceau de code pour le placer sous le mousecursor.

<div class="inp_field_12" onmousemove="file_ho(event,this,1)"><span>browse</span>
<input id="file_1" name="file_1" type="file" value="" onchange="file_ch(1)">
</div>
<div id="result_1" class="result"></div>


function file_ho(e, o, a) {
    e = window.event || e;
    var x = 0,
    y = 0;
    if (o.offsetParent) {
        do {
        x += o.offsetLeft;
        y += o.offsetTop;
        } while (o = o.offsetParent);
    }
var x1 = e.clientX || window.event.clientX;
var y1 = e.clientY || window.event.clientY;
var le = 100 - (x1 - x);
var to = 10 - (y1 - y);
document.getElementById('file_' + a).style.marginRight = le + 'px';
document.getElementById('file_' + a).style.marginTop = -to + 'px';
}

.inp_field_12 {
position:relative;
overflow:hidden;
float: left;
width: 130px;
height: 30px;
background: orange;
}
.inp_field_12 span {
position: absolute;
width: 130px;
font-family:'Calibri', 'Trebuchet MS', sans-serif;
font-size:17px;
line-height:27px;
text-align:center;
color:#555;
}
.inp_field_12 input[type='file'] {
cursor:pointer;
cursor:hand;
position: absolute;
top: 0px;
right: 0px;
-moz-opacity:0;
filter:alpha(opacity: 0);
opacity: 0;
outline: none;
outline-style:none;
outline-width:0;
ie-dummy: expression(this.hideFocus=true);
}
.inp_field_12:hover {
background-position:-140px -35px;
}
.inp_field_12:hover span {
color:#fff;
}
1
répondu Michel 2017-05-23 12:34:44

dans le cas où vous êtes à la recherche d'une bibliothèque javascript - hors de la solution de boîte, jQuery-fileinput fonctionne très bien.

1
répondu ellimilial 2013-11-25 21:15:41

mise à Jour tant pis, cela ne fonctionne pas dans IE ou c'est nouveau frère, FF. Fonctionne sur tous les autres types d'éléments comme prévu, mais ne fonctionne pas sur les entrées de fichier. Une bien meilleure façon de le faire est de créer un fichier d'entrée et une étiquette que des liens vers elle. Faire l'entrée de fichier afficher aucun et boom, il fonctionne dans IE9+ seamlessly.

avertissement: Tout ce qui est en dessous est de la merde!

en utilisant des pseudo-éléments positionnés / dimensionnés contre leur conteneur, on peut s'en sortir avec un seul fichier d'entrée (pas de supplément additionnel nécessaire), et le style comme d'habitude.

Démo

<input type="file" class="foo">

.foo {
    display: block;
    position: relative;
    width: 300px;
    margin: auto;
    cursor: pointer;
    border: 0;
    height: 60px;
    border-radius: 5px;
    outline: 0;
}
.foo:hover:after {
    background: #5978f8;
}
.foo:after {
    transition: 200ms all ease;
    border-bottom: 3px solid rgba(0,0,0,.2);
    background: #3c5ff4;
    text-shadow: 0 2px 0 rgba(0,0,0,.2);
    color: #fff;
    font-size: 20px;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    content: 'Upload Something';
    line-height: 60px;
    border-radius: 5px;
}

Profitez les gars!

Ancienne Mise À Jour

a transformé ceci en un Stylus mixin. Devrait être assez facile pour l'un d'entre vous les chats de SCSS cool de le convertir.

file-button(button_width = 150px)
  display block
  position relative
  margin auto
  cursor pointer
  border 0
  height 0
  width 0
  outline none
  &:after
    position absolute
    top 0
    text-align center
    display block
    width button_width
    left -(button_width / 2)

Utilisation:

<input type="file">

input[type="file"]
    file-button(200px)
1
répondu corysimmons 2013-12-26 16:07:45

Comme JGuo et CorySimmons mentionné précédemment, vous pouvez utiliser le cliquables comportement d'un styliser étiquette, cachant de moins en moins flexibles de fichier de l'élément d'entrée.

<!DOCTYPE html>
<html>
<head>
<title>Custom file input</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>

<body>

<label for="upload-file" class="btn btn-info"> Choose file... </label>
<input id="upload-file" type="file" style="display: none"
onchange="this.nextElementSibling.textContent = this.previousElementSibling.title = this.files[0].name">
<div></div>

</body>
</html>
1
répondu KitKat 2017-05-23 12:02:46

ces réponses sont jolies, et elles fonctionnent toutes pour des cas d'utilisation très spécifiques. C'est-à-dire, ils sont opiniâtres.

donc, voici une réponse qui ne suppose rien, mais qui fonctionnera peu importe comment vous la modifiez. Vous pouvez changer la conception avec css, ajouter javascript pour peut-être montrer un nom de fichier sur le changement, etc. il sera toujours toujours.

Code:

voici le noyau css

.file-input{
  pointer-events: none;
  position: relative;
  overflow: hidden;
}
.file-input > * {
  pointer-events: none;
}
.file-input > input[type="file"]{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  pointer-events: all;
  cursor: pointer;
  height: 100%;
  width: 100%;
}

et le html de base:

<div class="file-input">
  <input type="file"/>
</div>

comme vous pouvez le voir, nous forçons tout événement pointeur(clic) qui se produit sur le .fichier d'entrée de l'élément, ou l'un de ses enfants, pour être acheminé vers le fichier d'entrée. C'est parce que l'entrée de fichier est positionnée absolue et consommera la largeur/hauteur du conteneur toujours. Vous pouvez donc personnaliser pour l'adapter à votre besoin. style le wrapper dans un bouton, utilisez quelques js pour afficher le nom de fichier sur select, etc. rien ne se cassera tant que le code de base ci-dessus reste intact.

comme vous le verrez dans la démo, j'ai ajouté un span avec le texte" Select file "et une classe avec des styles supplémentaires pour style le .file-input div. Cela devrait être le point de départ canonique pour toute personne ayant l'intention de créer un élément de téléchargement de fichier personnalisé.

Demo: JSFIDDLE

1
répondu r3wt 2017-04-04 22:16:56