Comment personnaliser?

Question

Comment personnaliser?

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

113

css file-upload html input

demandé sur alex 2011-04-28 07:40:21

17 réponses

score 176 · Answer 1

vous ne pouvez pas modifier grand chose sur le input[type=file] contrôle lui-même.

puisque cliquer sur un élément label correctement couplé avec une entrée l'activera/le focalisera, nous pouvons utiliser un label pour déclencher la fenêtre de navigation du système D'exploitation.

, Voici comment vous pouvez le faire...

label {
   cursor: pointer;
   /* Style as you please, it will become the visible UI component. */
}

#upload-photo {
   opacity: 0;
   position: absolute;
   z-index: -1;
}

<label for="upload-photo">Browse...</label>
<input type="file" name="photo" id="upload-photo" />

le CSS pour le contrôle de forme le fera apparaître invisible et ne prendra pas place dans le document layout, mais sera toujours existe de sorte qu'il peut être activé via le label .

si vous voulez afficher le chemin choisi par l'utilisateur après la sélection, vous pouvez écouter pour l'événement change avec JavaScript, puis lire le chemin que le navigateur met à votre disposition (pour des raisons de sécurité, il peut lie à vous concernant le chemin exact). Un moyen pour faire joli, pour l'utilisateur final est d'utiliser simplement le nom de la base de la trajectoire qui est retourné (de sorte que l'utilisateur ne voit le nom de fichier choisi).

il y a un grand guide de Tympanus pour styliser ceci.

score 27 · Answer 2

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>

score 21 · Answer 3

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

pourquoi pas? ^_^

voir l'exemple ici

score 8 · Answer 4

si vous utilisez bootstrap voici une meilleure solution:

<label class="btn btn-default btn-file">
    Browse <input type="file" style="display: none;">
</label>

pour IE8 et moins http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3 /

Source: https://stackoverflow.com/a/18164555/625952

score 6 · Answer 5

dans webkit vous pouvez essayer ceci...

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

score 4 · Answer 6

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 plus de personnalisation, il suffit de 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 de rembourrage-dessus pour le conteneur

score 4 · Answer 7

c'est beaucoup mieux si vous utilisez simplement 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 */
}

score 3 · Answer 8

le truc est de cacher l'entrée et de 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 /

score 3 · Answer 9

de la façon la plus facile..

<label>
     Upload
    <input type="file" style="visibility: hidden;"/>
</label>

score 1 · Answer 10

Bootstrap exemple

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

score 0 · Answer 11

Voici une façon que j'aime parce qu'il fait l'entrée remplir le conteneur entier. Le truc est la "font-size: 100px", et il faut qu'il aille 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;
}

score 0 · Answer 12

vous pouvez les coiffer, mais vous ne pouvez pas enlever les éléments qui sont déjà là. Si vous êtes créatif, vous pouvez travailler avec cela 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, de supprimer des lignes, d'ajouter les vôtres, de faire n'importe quoi jusqu'à ce que vous obteniez quelque chose qui ressemble à ce que vous aimez!

score 0 · Answer 13

j'ai opté pour cette option qui clarifie comment personnaliser complètement le bouton browse en incluant un gestionnaire du nom de fichier téléchargé, également personnalisé. Il ajoute des champs supplémentaires et des contrôles côté client juste pour montrer comment inclure le browse dans un "vrai" Formulaire, pas seulement un standalone.

voici le codepen: http://codepen.io/emiemi/pen/zxNXWR

JS:

//click on our custom btn triggers a click on the hidden actual file input 
$("#btnup").click(function(){
   $("#fileup").click();    
});


//changes on the three fields (input, tit,and name) trigger a control which checks if the 3 fields are all filled and if file field is valid (an image is uploaded)
$('#fileup').change(function(){
    var formDOMObj = document.upload;
//here we assign tu our text field #fileup the name of the selected file  
    var res=$('#fileup').val();
    var arr = res.split("\");
//if file is not valid we show the error icon and the red alert
    if (formDOMObj.fileup.value.indexOf(".jpg") == -1 && formDOMObj.fileup.value.indexOf(".png") == -1 &&  formDOMObj.fileup.value.indexOf(".jpeg") == -1 && formDOMObj.fileup.value.indexOf(".bmp") == -1 && formDOMObj.fileup.value.indexOf(".JPG") == -1 && formDOMObj.fileup.value.indexOf(".PNG") == -1 &&  formDOMObj.fileup.value.indexOf(".JPEG") == -1 && formDOMObj.fileup.value.indexOf(".BMP") == -1){
        $( ".imgupload" ).hide("slow"); 
        $( ".imguploadok" ).hide("slow");   
        $( ".imguploadstop" ).show("slow");
        $('#nomefile').css({"color":"red","font-weight":700});
        $('#nomefile').html("The file "+arr.slice(-1)[0]+" is not an image!");
        $( "#bottone" ).hide();
        $( "#fakebtn" ).show();
    }else{
 //if file is valid we show the green alert
    $( ".imgupload" ).hide("slow");
    $( ".imguploadstop" ).hide("slow");
    $( ".imguploadok" ).show("slow");
    $('#nomefile').html(arr.slice(-1)[0]);
    $('#nomefile').css({"color":"green","font-weight":700});
    if (formDOMObj.nome.value!=""&&formDOMObj.tit.value!=""&&formDOMObj.fileup.value!=""){
  //if all three fields are valid the fake input btn is hidden and the actual one i s finally hown
        $( "#fakebtn" ).hide();
        $( "#bottone" ).show();
    }
    }
});


$('#nome').change(function(){
//same as file change but on name field
    var formDOMObj = document.upload;
    if (formDOMObj.nome.value!=""&&formDOMObj.tit.value!=""&&formDOMObj.fileup.value!=""){
        $( "#fakebtn" ).hide();
        $( "#bottone" ).show();
    }else{
        $( "#bottone" ).hide();
        $( "#fakebtn" ).show();
    }
});
$('#tit').change(function(){
 //same as file change but on tit field
    var formDOMObj = document.upload;
    if (formDOMObj.nome.value!=""&&formDOMObj.tit.value!=""&&formDOMObj.fileup.value!=""){
        $( "#fakebtn" ).hide();
        $( "#bottone" ).show();
    }else{
        $( "#bottone" ).hide();
        $( "#fakebtn" ).show();
    }
});

HTML:

<form name="upload" method="post" action="/" enctype="multipart/form-data" accept-charset="utf-8">
<div class="row">
  <div class="col-md-6 center">
<!--this is the actual file input, s hidden beacause we wanna use our custom one-->
    <input type="file" value="" class="hidden" name="fileup" id="fileup">
    <div class="btn-container">
<!--the three icons: default, ok file (img), error file (not an img)-->
      <h1 class="imgupload"><i class="fa fa-file-image-o"></i></h1>
      <h1 class="imguploadok"><i class="fa fa-check"></i></h1>
      <h1 class="imguploadstop"><i class="fa fa-times"></i></h1>
<!--this field changes dinamically displaying the filename we are trying to upload-->
      <p id="nomefile">Only pics allowed! (jpg,jpeg,bmp,png)</p>
<!--our custom btn which triggers the actual hidden one-->
      <button type="button" id="btnup" class="btn btn-primary btn-lg">Browse for your pic!</button>
    </div>
  </div>
<!--additional fields-->
  <div class="col-md-6">
    <div class="row">
      <div class="form-group" id="top">
        <div class="col-md-12">
          <input type="text" maxlength="100" class="form-control" name="nome" id="nome" placeholder="Your Name">
        </div>
      </div>
    </div>
    <div class="row">
      <div class="form-group">
        <div class="col-md-12">
          <input type="text" maxlength="50" class="form-control" name="tit" id="tit" placeholder="I am rubber, you are glue">
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-md-8">
        <p class="white">All fields are mandatory</p>
      </div>
      <div class="col-md-4">
<!--the defauld disabled btn and the actual one shown only if the three fields are valid-->
        <input type="submit" value="Submit!" class="btn btn-primary" id="bottone" style="padding-left:50px; padding-right:50px; display:none;">
        <button type="button" class="btn btn-default" disabled="disabled" id="fakebtn"  style="padding-left:40px; padding-right:40px;">Submit! <i class="fa fa-minus-circle"></i></button>
      </div>
    </div>
  </div>
</div>

score 0 · Answer 14

pour montrer le chemin du fichier sélectionné, vous pouvez essayer ce en 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 le 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;
}

score 0 · Answer 15

il suffit de styliser un bouton normal comme vous voulez, en utilisant votre CSS préféré.

ensuite, appelez une fonction JS simple 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>

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

pour plus de détails, consultez la zone de téléchargement et les envois gmail.

score 0 · Answer 16

 $(document).ready(function () {
        $(document).mousemove(function () {
        $('#myList').css('display', 'block');
        $("#seebtn").css('display', 'none');
        $("#hidebtn").css('display', 'none');
        $('#displayFileNames').html('');
        $("#myList").html('');
        var fileArray1 = document.getElementsByClassName('file-input');
        for (var i = 0; i < fileArray1.length; i++) {
            var files = fileArray1[i].files;
            for (var j = 0; j < files.length; j++) {
                $("#myList").append("<li style='color:black'>" + files[j].name + "</li>");
            }
        };

        if (($("#myList").html()) != '') {
            $('#unselect').css('display', 'block');
            $('#divforfile').css('color', 'green');
            $('#attach').css('color', 'green');
            $('#displayFileNames').html($("#myList").children().length + ' ' + 'files selezionato');

        };

        if (($("#myList").html()) == '') {
            $('#divforfile').css('color', 'black');
            $('#attach').css('color', 'black');
            $('#displayFileNames').append('Nessun File Selezionato');
        };
    });

  });

  function choosefiles(obj) {
        $(obj).hide();
        $('#myList').css('display', 'none');
        $('#hidebtn').css('display', 'none');
        $("#seebtn").css('display', 'none');
        $('#unselect').css('display', 'none');
        $("#upload-form").append("<input class='file-input inputs' type='file' onclick='choosefiles(this)' name='file[]' multiple='multiple' />");
        $('#displayFileNames').html('');
    }

  $(document).ready(function () {
        $('#unselect').click(function () {
            $('#hidebtn').css('display', 'none');
            $("#seebtn").css('display', 'none');
            $('#displayFileNames').html('');
            $("#myList").html('');
            $('#myFileInput').val('');
            document.getElementById('upload-form').reset();         
            $('#unselect').css('display', 'none');
            $('#divforfile').css('color', 'black');
            $('#attach').css('color', 'black');

        });
    });

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
  .divs {
        position: absolute;
        display: inline-block;
        background-color: #fff;
    }

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

    .icons {
        position: absolute;
    }

 </style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
            <div>
                <form id='upload-form' action='' method='post' enctype='multipart/form-data'>
                   
                    <div class="divs" id="divforfile" style="color:black">
                        <input id='myFileInput' class='file-input inputs' type='file' name='file[]' onclick="choosefiles(this)" multiple='multiple' />
                        <i class="material-icons" id="attach" style="font-size:21px;color:black">attach_file</i><label>Allegati</label>
                    </div>
                </form>
                <br />
            </div>
            <br />  
            <div>
                <button style="border:none; background-color:white; color:black; display:none" id="seebtn"><p>Files &#9660;</p></button>
                <button style="border:none; background-color:white; color:black; display:none" id="hidebtn"><p>Files &#9650;</p></button>
                <button type="button" class="close" aria-label="Close" id="unselect" style="display:none;float:left">
                    <span style="color:red">&times;</span>
                </button>
                <div id="displayFileNames">
                </div>
                <ul id="myList"></ul>
            </div>

il s'agit de mon téléchargement/pièce jointe entièrement fonctionnel de fichier personnalisé en utilisant jquery & javascript (Visual studio). Ce sera utile !

Le Code

sera disponible dans la section commentaires !

Link: https://youtu.be/It38OzMAeig

Enjoy:)

 $(document).ready(function () {
        $(document).mousemove(function () {
        $('#myList').css('display', 'block');
        $("#seebtn").css('display', 'none');
        $("#hidebtn").css('display', 'none');
        $('#displayFileNames').html('');
        $("#myList").html('');
        var fileArray1 = document.getElementsByClassName('file-input');
        for (var i = 0; i < fileArray1.length; i++) {
            var files = fileArray1[i].files;
            for (var j = 0; j < files.length; j++) {
                $("#myList").append("<li style='color:black'>" + files[j].name + "</li>");
            }
        };

        if (($("#myList").html()) != '') {
            $('#unselect').css('display', 'block');
            $('#divforfile').css('color', 'green');
            $('#attach').css('color', 'green');
            $('#displayFileNames').html($("#myList").children().length + ' ' + 'files selezionato');

        };

        if (($("#myList").html()) == '') {
            $('#divforfile').css('color', 'black');
            $('#attach').css('color', 'black');
            $('#displayFileNames').append('Nessun File Selezionato');
        };
    });

  });

  function choosefiles(obj) {
        $(obj).hide();
        $('#myList').css('display', 'none');
        $('#hidebtn').css('display', 'none');
        $("#seebtn").css('display', 'none');
        $('#unselect').css('display', 'none');
        $("#upload-form").append("<input class='file-input inputs' type='file' onclick='choosefiles(this)' name='file[]' multiple='multiple' />");
        $('#displayFileNames').html('');
    }

  $(document).ready(function () {
        $('#unselect').click(function () {
            $('#hidebtn').css('display', 'none');
            $("#seebtn").css('display', 'none');
            $('#displayFileNames').html('');
            $("#myList").html('');
            $('#myFileInput').val('');
            document.getElementById('upload-form').reset();         
            $('#unselect').css('display', 'none');
            $('#divforfile').css('color', 'black');
            $('#attach').css('color', 'black');

        });
    });

<style>
  .divs {
        position: absolute;
        display: inline-block;
        background-color: #fff;
    }

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

    .icons {
        position: absolute;
    }

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

   <div>
                <form id='upload-form' action='' method='post' enctype='multipart/form-data'>
                   
                    <div class="divs" id="divforfile" style="color:black">
                        <input id='myFileInput' class='file-input inputs' type='file' name='file[]' onclick="choosefiles(this)" multiple='multiple' />
                        <i class="material-icons" id="attach" style="font-size:21px;color:black">attach_file</i><label>Allegati</label>
                    </div>
                </form>
                <br />
            </div>
            <br />  
            <div>
                <button style="border:none; background-color:white; color:black; display:none" id="seebtn"><p>Files &#9660;</p></button>
                <button style="border:none; background-color:white; color:black; display:none" id="hidebtn"><p>Files &#9650;</p></button>
                <button type="button" class="close" aria-label="Close" id="unselect" style="display:none;float:left">
                    <span style="color:red">&times;</span>
                </button>
                <div id="displayFileNames">
                </div>
                <ul id="myList"></ul>
            </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 $(document).ready(function () {
        $(document).mousemove(function () {
        $('#myList').css('display', 'block');
        $("#seebtn").css('display', 'none');
        $("#hidebtn").css('display', 'none');
        $('#displayFileNames').html('');
        $("#myList").html('');
        var fileArray1 = document.getElementsByClassName('file-input');
        for (var i = 0; i < fileArray1.length; i++) {
            var files = fileArray1[i].files;
            for (var j = 0; j < files.length; j++) {
                $("#myList").append("<li style='color:black'>" + files[j].name + "</li>");
            }
        };

        if (($("#myList").html()) != '') {
            $('#unselect').css('display', 'block');
            $('#divforfile').css('color', 'green');
            $('#attach').css('color', 'green');
            $('#displayFileNames').html($("#myList").children().length + ' ' + 'files selezionato');

        };

        if (($("#myList").html()) == '') {
            $('#divforfile').css('color', 'black');
            $('#attach').css('color', 'black');
            $('#displayFileNames').append('Nessun File Selezionato');
        };
    });

  });

  function choosefiles(obj) {
        $(obj).hide();
        $('#myList').css('display', 'none');
        $('#hidebtn').css('display', 'none');
        $("#seebtn").css('display', 'none');
        $('#unselect').css('display', 'none');
        $("#upload-form").append("<input class='file-input inputs' type='file' onclick='choosefiles(this)' name='file[]' multiple='multiple' />");
        $('#displayFileNames').html('');
    }

  $(document).ready(function () {
        $('#unselect').click(function () {
            $('#hidebtn').css('display', 'none');
            $("#seebtn").css('display', 'none');
            $('#displayFileNames').html('');
            $("#myList").html('');
            $('#myFileInput').val('');
            document.getElementById('upload-form').reset();         
            $('#unselect').css('display', 'none');
            $('#divforfile').css('color', 'black');
            $('#attach').css('color', 'black');

        });
    });

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
  .divs {
        position: absolute;
        display: inline-block;
        background-color: #fff;
    }

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

    .icons {
        position: absolute;
    }

 </style>

 <div>
                <form id='upload-form' action='' method='post' enctype='multipart/form-data'>
                   
                    <div class="divs" id="divforfile" style="color:black">
                        <input id='myFileInput' class='file-input inputs' type='file' name='file[]' onclick="choosefiles(this)" multiple='multiple' />
                        <i class="material-icons" id="attach" style="font-size:21px;color:black">attach_file</i><label>Allegati</label>
                    </div>
                </form>
                <br />
            </div>
            <br />  
            <div>
                <button style="border:none; background-color:white; color:black; display:none" id="seebtn"><p>Files &#9660;</p></button>
                <button style="border:none; background-color:white; color:black; display:none" id="hidebtn"><p>Files &#9650;</p></button>
                <button type="button" class="close" aria-label="Close" id="unselect" style="display:none;float:left">
                    <span style="color:red">&times;</span>
                </button>
                <div id="displayFileNames">
                </div>
                <ul id="myList"></ul>
            </div>

score -2 · Answer 17

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.

Espérons que cette aide!

P. S.: Ne pas oubliez d'inclure jQuery de CDN ou de toute autre source

Las etiquetas más populares

Comment personnaliser?

17 réponses

Bootstrap exemple