Question Styler un type d'entrée = bouton "fichier"


Comment styler l'entrée type="file" bouton.


512
2018-02-21 10:36


origine


Réponses:


Styler les 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">

Au lieu de cela, vous devrez utiliser l'attribut size:

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

Pour tout style plus sophistiqué que cela (par exemple en changeant l'aspect du bouton de navigation), vous devrez examiner l'approche astucieuse consistant à superposer un bouton de style et une zone de saisie au-dessus de 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.


157
2018-04-03 16:11



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 d'étiquette personnalisé avec un for attribut attaché à un caché élément d'entrée de fichier. (L'étiquette for l'attribut doit correspondre à l'élément de fichier id 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: (Exemple)

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

En termes de style, il suffit de cacher1 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 personnaliser 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 ci-dessous. Soyez également conscient du fait 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 masquer l'entrée (1, 2) qui fonctionnent dans ces circonstances.


709
2017-09-13 17:24



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,


173
2018-03-03 14:42



Cachez-le avec css et utilisez un bouton personnalisé avec $ (sélecteur) .click () 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 sera effacé 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;
    });
});

73
2017-07-05 11:14



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 créer votre nouveau btn comme vous le souhaitez: D


55
2017-08-02 08:13



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

A partir de IE10, le bouton d’entrée du fichier peut être stylé à l’aide du ::-ms-browse pseudo-élément. 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:

This displays as follows in IE10 on Windows 8:

WebKit

WebKit fournit un crochet pour son bouton d'entrée de fichier avec le ::-webkit-file-upload-button pseudo-élément. 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:

This displays as follows in Chrome 26 on OS X:


45
2018-05-01 07:37



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

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


20
2017-08-23 01:33



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:

Example button

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


18
2017-08-05 16:49



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


18
2017-12-30 08:07



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

Veillez à 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 "nouveau" bouton ou l'insérer sous quelque chose d'autre avec z-index si vous préférez.

Installez un peu de 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.


11
2017-12-04 00:38



VISIBILITÉ: TRICK caché

Je vais habituellement pour le visibility:hidden tour

c'est mon bouton stylé

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

C'est le type d'entrée = bouton de fichier. Noter la visibility:hidden rè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>

8
2018-06-24 23:33