html - personnaliser - modifier input type file



Comment personnaliser<input type="file">? (12)

C'est beaucoup mieux si vous utilisez juste un <label> , cachez le <input> et personnalisez l'étiquette.

HTML:

<input type="file" id="input">
<label for="input" id="label">Choose File</label>

CSS:

input#input{
    display: none;
}
label#label{
    /* Customize your label here */
}

Est-il possible de changer l'apparence de <input type="file"> ?


Answer #1

Dans webkit, vous pouvez essayer ceci ...

input[type="file"]::-webkit-file-upload-button{
   /* style goes here */
}

Answer #2

Juste un style de bouton normal comme vous le souhaitez, en utilisant votre CSS préféré.

Ensuite, appelez une simple fonction JS pour créer et lier un élément d'entrée caché à votre bouton stylé. N'ajoutez pas de CSS spécifique au navigateur pour faire la partie cachée.

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

Pour plus de détails, faites des recherches sur DropZone et Gmail.


Answer #3

L'astuce consiste à masquer l'entrée et à personnaliser l'étiquette.

HTML:

<div class="inputfile-box">
  <input type="file" id="file" class="inputfile" onchange='uploadFile(this)'>
  <label for="file">
    <span id="file-name" class="file-box"></span>
    <span class="file-button">
      <i class="fa fa-upload" aria-hidden="true"></i>
      Select File
    </span>
  </label>
</div>

CSS:

.inputfile-box {
  position: relative;
}

.inputfile {
  display: none;
}

.container {
  display: inline-block;
  width: 100%;
}

.file-box {
  display: inline-block;
  width: 100%;
  border: 1px solid;
  padding: 5px 0px 5px 5px;
  box-sizing: border-box;
  height: calc(2rem - 2px);
}

.file-button {
  background: red;
  padding: 5px;
  position: absolute;
  border: 1px solid;
  top: 0px;
  right: 0px;
}

JS:

function uploadFile(target) {
    document.getElementById("file-name").innerHTML = target.files[0].name;
}

Vous pouvez vérifier cet exemple: https://jsfiddle.net/rjurado/hnf0zhy1/4/


Answer #4

Pour afficher le chemin du fichier sélectionné, vous pouvez l'essayer sur html:

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

et en javascript:

        var fakeFileUpload = document.createElement('div');
        fakeFileUpload.className = 'fakefile';
        var image = document.createElement('div');
        image.className='fakebtn';
        image.innerHTML = 'browse';
        fakeFileUpload.appendChild(image);
        fakeFileUpload.appendChild(document.createElement('input'));
        var x = document.getElementsByTagName('input');
        for (var i=0;i<x.length;i++) {
            if (x[i].type != 'file') continue;
            if (x[i].parentNode.className != 'fileinputs') continue;
            x[i].className = 'file hidden';
            var clone = fakeFileUpload.cloneNode(true);
            x[i].parentNode.appendChild(clone);
            x[i].relatedElement = clone.getElementsByTagName('input')[0];
            x[i].onchange = x[i].onmouseout = function () {
                this.relatedElement.value = this.value;
            }
        }

et style:

div.fileinputs {
    position: relative;
    height: 30px;
    width: 370px;
}
input.file.hidden {
    position: relative;
    text-align: right;
    -moz-opacity: 0;
    filter: alpha(opacity: 0);
    opacity: 0;
    z-index: 2;
}
div.fakefile {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0;
    width: 370px;
    padding: 0;
    margin: 0;
    z-index: 1;
    line-height: 90%;
}
div.fakefile input {
    margin-bottom: 5px;
    margin-left: 0;
    border: none;
    box-shadow: 0px 0px 2px 1px #ccc;
    padding: 4px;
    width: 241px;
    height: 20px;
}
div.fakefile .fakebtn{
    width: 150px;
    background: #eb5a41;
    z-index: 10;
    font-family: roya-bold;
    border: none;
    padding: 5px 15px;
    font-size: 18px;
    text-align: center;
    cursor: pointer;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    transition: all 0.4s ease;
    display: inline;
    margin-left: 3px;
}
div.fileinputs input[type="file"]:hover + div .fakebtn{
    background: #DA472E;
}

div.fileinputs input[type="file"] {
    opacity: 0;
    position: absolute;
    top: -6px;
    right: 0px;
    z-index: 20;
    width: 102px;
    height: 40px;
    cursor: pointer;
}

Answer #5

Quelque chose comme ça peut-être?

<form>
  <input id="fileinput" type="file" style="display:none;"/>
</form>
<button id="falseinput">El Cucaratcha, for example</button>
<span id="selected_filename">No file selected</span>

<script>
$(document).ready( function() {
  $('#falseinput').click(function(){
    $("#fileinput").click();
  });
});
$('#fileinput').change(function() {
  $('#selected_filename').text($('#fileinput]')[0].files[0].name);
});

</script>

Answer #6

Voici une façon que j'ai récemment découvert, avec un peu de jQuery

Code HTML:

<form action="">
    <input type="file" name="file_upload" style="display:none" id="myFile">

    <a onclick="fileUpload()"> Upload a file </a>
</form>

Pour la partie javascript / jQuery:

<script>
function fileUpload() {
    $("#myFile").click();
}
</script>

Dans cet exemple, j'ai mis une balise "anchor" pour déclencher le téléchargement du fichier. Vous pouvez remplacer avec tout ce que vous voulez, n'oubliez pas de mettre l'attribut "onclick" avec la fonction appropriée.

J'espère que cela t'aides!

PS: N'oubliez pas d'inclure jQuery de CDN ou toute autre source


Answer #7

Voici une façon que j'aime car elle fait que l'entrée remplisse tout le conteneur. L'astuce est le "font-size: 100px", et il faut aller avec le "overflow: hidden" et la position relative.

<div id="upload-file-container" >
   <input type="file" />
</div>

#upload-file-container {
   width: 200px;
   height: 50px;
   position: relative;
   border: dashed 1px black;
   overflow: hidden;
}

#upload-file-container input[type="file"]
{
   margin: 0;
   opacity: 0;   
   font-size: 100px;
}

Answer #8

Vous pouvez les styler, mais vous ne pouvez pas supprimer les éléments qui s'y trouvent déjà. Si vous êtes créatif, vous pouvez travailler avec et faire quelque chose comme ceci:

input[type=file] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: #EEE;
    background: linear-gradient(to top, #FFF, #DDD);
    border: thin solid rgba(0,0,0, .5);
    border-radius: .25em;
    box-shadow: inset .25em .25em .25em rgba(255,255,255, .5), inset -.1em -.1em .1em rgba(0,0,0, 0.1);
    cursor: text;
    padding: .25em;
}

http://jsfiddle.net/zr1x1m2b/1/

Je vous suggère de jouer avec ce code, d'enlever des lignes, d'ajouter les vôtres, de faire ce que vous voulez jusqu'à ce que vous obteniez quelque chose qui ressemble à ce que vous voulez!


Answer #9

tout d'abord c'est un conteneur:

<div class="upload_file_container">
    Select file!
    <input type="file" name="photo" />
</div>

La seconde, c'est un style CSS, si vous voulez vraiment plus de personnalisation, juste garder les yeux ouverts :)

.upload_file_container{
   width:100px;
   height:40px;
   position:relative;
   background(your img);
}

.upload_file_container input{
   width:100px;
   height:40px;
   position:absolute;
   left:0;
   top:0;
   cursor:pointer;
}

Cet exemple n'a pas de style pour le texte à l'intérieur du bouton, il dépend de la taille de la police, il suffit de corriger la hauteur et les valeurs padding-top pour le conteneur


Answer #10

Exemple de Bootstrap

<label className="btn btn-info btn-lg">
  Upload
  <input type="file" style="display: none" />
</label>

Answer #11
  <label for="fusk">dsfdsfsd</label>
  <input id="fusk" type="file" name="photo" style="display: none;">

pourquoi pas? ^ _ ^

Voir l'exemple here





input