html pure - Styler un type d'entrée=bouton "fichier"





css template (25)


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

Note J'ai utilisé <a> au lieu de <button> cela permet aux événements de cliquer pour augmenter.

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

Comment styler le type="file" entrée type="file" bouton type="file" .




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 également atteindre vos objectifs sans jQuery avec JavaScript normal.

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




 <label>
    <input type="file" />
 </label>

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




Je suis capable de 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>




Une solution vraiment intelligente utilisant jQuery qui fonctionne dans tous les anciens navigateurs ainsi que dans les nouveaux, j'ai trouvé here . Il prend soin de tous les problèmes de style et de clic (), en utilisant le bouton de navigation du fichier réel. J'ai fait une version javascript simple: fiddle La solution est aussi simple que genius: rendre l'entrée de fichier invisible, et utiliser un morceau de code pour le placer sous le curseur de souris.

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



J'ai trouvé une méthode très simple pour passer le bouton de fichier à une image. Vous venez d'étiqueter une image et de le 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.




Tous les moteurs de rendu génèrent automatiquement un bouton lorsqu'un <input type="file"> est créé. Historiquement, ce bouton a été complètement dénué de style. Cependant, Trident et WebKit ont ajouté des hooks à travers des pseudo-éléments.

Trident

À partir de IE10, le bouton d'entrée de fichier peut être stylé en utilisant le pseudo-élément ::-ms-browse . Fondamentalement, toutes les règles CSS que vous appliquez à un bouton normal 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 sous 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:

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

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




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

Lorsque vous stylisez une entrée de fichier, vous ne devez pas interrompre l'interaction native fournie par l'entrée.

L'approche display: none casse le support de glisser-déposer.

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

En utilisant cette technique, vous pouvez facilement styler une zone de clic / déposer pour l'utilisateur, et ajouter une classe personnalisée en javascript sur l'événement dragenter pour mettre à jour les styles et donner à l'utilisateur un feedback pour lui permettre de supprimer 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 l'événement de dragover et les fichiers déposés).

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

J'espère que cela a aidé!




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:

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




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

vous pourriez aussi regarder www.quirksmode.org/dom/inputfile.html




Cette semaine, j'ai également eu besoin de personnaliser le bouton et afficher le nom du fichier sélectionné de côté, donc après avoir lu certaines des réponses ci-dessus (Merci BTW) je suis venu avec la mise en œuvre 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 ng-file-upload lib, Angulaire-sage, je lie le nom de fichier à mon $ scope et en lui donnant la valeur initiale de 'Aucun fichier choisi', je lie aussi la fonction onFileSelect () à ma portée donc quand un fichier est sélectionné, je reçois le nom de fichier en utilisant ng-upload API et l'assigner à $ scope.filename.




SEULEMENT CSS

Utilisez ceci 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;
}



Ne vous laissez pas berner par de «super» solutions CSS uniquement spécifiques au navigateur, ou qui superposent le bouton stylé au dessus du vrai bouton, ou qui vous forcent à utiliser un <label> au lieu d'un <button> , ou tout autre hack. JavaScript est nécessaire pour le faire fonctionner pour un usage général. S'il vous plaît étudier comment Gmail et DropZone le faire si vous ne me croyez pas.

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

Notez comment le code ci-dessus le re-lie 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 voulez probablement obtenir le fichier chaque fois que l'utilisateur le fournit.




Update Nevermind, this doesn't work in IE or it's new brother, FF. Works on every other type of element as expected, but doesn't work on file inputs. A much better way to do this is to just create a file input and a label that links to it. Make the file input display none and boom, it works in IE9+ seamlessly.

Warning: Everything below this is crap!

By using pseudo elements positioned/sized against their container, we can get by with only one input file (no additional markup needed), and style as per usual.

Demo

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

Enjoy guys!

Old Update

Turned this into a Stylus mixin. Should be easy enough for one of you cool SCSS cats to convert it.

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)

Usage:

<input type="file">

input[type="file"]
    file-button(200px)



Peut-être beaucoup de vampires. 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"/>

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




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



In case you're looking for a javascript library - out of the box solution, jquery-fileinput works fine.




As and mentioned, you can use the clickable behaviour of a stylable label, hiding the less flexible file input element.

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



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

1.) c'est le formulaire html simple (s'il vous plaît lire les commentaires html que j'ai écrit 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 input du fichier.

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

maintenant vous pouvez utiliser n'importe quel type de style sans vous soucier de la façon de changer les styles par défaut. Je le sais très bien, parce que j'ai essayé de changer les styles par défaut pour un mois et demi. croyez-moi, c'est très difficile parce que les différents navigateurs ont des tags différents. Donc, utilisez celui-ci pour construire vos formulaires de téléchargement de fichiers personnalisés. Voici le code complet AUTOMATISÉ de TÉLÉCHARGEMENT.

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

prendre plaisir!

Bonne journée,




These answers are nice, and they all work for very specific use cases. That is to say, they are opinionated.

So, here's an answer that assumes nothing, but will work no matter how you modify it. You can change design with css, add javascript to maybe show a file name on change, etc. it will still always work.

Code:

Here is the core 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%;
}

and the core html:

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

As you can see, we are forcing any pointer event(click) that happens on the .file-input element, or any of its children, to be proxied to the file input. This is because the file input is positioned absolute and will consume the width/height of the container always. You can therefore customize to fit your need. style the wrapper into a button, use some js to display file name on select, etc. nothing will break so long as the above core code remains intact.

Comme vous le verrez dans la démo, j'ai ajouté un spantexte avec "Select file" et une classe avec des styles supplémentaires pour styliser la .file-inputdiv. Cela devrait être le point de départ canonique pour quiconque a l'intention de créer un élément de téléchargement de fichier personnalisé.

Démonstration: JSFIDDLE




Vous n'avez pas besoin de JavaScript pour ça! Voici une solution cross-browser:

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

La meilleure approche serait d'avoir un élément label personnalisé avec un attribut for attaché à un élément d'entrée de fichier caché . (L'attribut for l'étiquette doit correspondre à l' id l'élément 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 également enrouler directement l'élément d'entrée de fichier avec une étiquette: (example)

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

En termes de style, cachez simplement 1 l'élément d'entrée en utilisant le sélecteur d'attribut .

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

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

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

1 - Il vaut la peine de noter que si vous masquez l'élément en utilisant display: none , cela ne fonctionnera pas dans IE8 et ci-dessous. Tenez également compte du fait que jQuery validate 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 masquer l'entrée ( 1 , 2 ) qui fonctionne dans ces circonstances.




C'est simple avec jquery. Pour donner un exemple de code de la suggestion de 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">

Veillez à définir le style sur l'entrée lorsque vous êtes prêt: opacity: 0 Vous ne pouvez pas définir l' display: none car il doit être cliquable. Mais vous pouvez le placer sous le "nouveau" bouton ou l'insérer sous quelque chose d'autre avec z-index si vous préférez.

Configurez 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 lors de la modification.

$('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 tous être prêts.




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




<input type="file" name="media" style="display-none" onchange="document.media.submit()">

Je voudrais normalement utiliser javascript simple pour personnaliser la balise d'entrée de fichier.Un champ de saisie caché, sur un clic de bouton, javascript appeler le champ caché, solution simple avec un css ou un tas de jquery.

<button id="file" onclick="$('#file').click()">Upload File</button>







html css file-io