Comment personnaliser <input type = “file”>?

164

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

Codeur débutant
la source
La raison pour laquelle le champ de texte existe est qu'il montre à l'utilisateur le chemin du fichier après avoir parcouru et sélectionné son fichier.
k to the z
Oooppss ... il semble que c'est la façon dont Firefox le gère ...
Newbie Coder
Juste pour que nous soyons clairs, même après avoir parcouru le fichier, ils doivent toujours soumettre le formulaire avec un bouton d'envoi de formulaire.
k to the z
2
Veuillez consulter cette solution pour une manière beaucoup plus simple de le faire.
Joeytje50
1
C'est un peu bizarre de marquer une future question comme un double d'une ancienne. Cela établira-t-il la priorité selon laquelle il est acceptable de poser à nouveau les questions et de fermer les premières? Les doublons sont déjà un gros problème ici. Je vois la valeur de re-poser une question où les réponses existantes sont devenues obsolètes , mais il est toujours possible de modifier la question et d'ajouter / modifier de nouvelles réponses.
alex le

Réponses:

235

Vous ne pouvez pas beaucoup modifier le input[type=file]contrôle lui-même.

Puisque cliquer sur un labelélément correctement associé à une entrée l'activera / le focalisera, nous pouvons utiliser a labelpour déclencher la boîte de dialogue 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 la forme fera apparaître invisible et ne pas prendre place dans la mise en page de documents, mais encore exister de sorte qu'il peut être activé via le label.

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

Il existe un excellent guide de Tympanus pour le style.

Alex
la source
2
Je crois que ce sont de meilleurs styles, étant donné que nous visons à ouvrir la boîte de dialogue de sélection de fichier en cliquant n'importe où sur le conteneur:#container { position: relative; width: ...px; height: ...px; overflow: hidden; } #input { position: absolute; right: 0; font-size: <many a>px; opacity: 0; margin: 0; padding: 0; border: none; }
x-yuri
1
L'utilisation <label>(comme le montre Tympanus) est beaucoup plus sémantique et moins hacky. En outre, cette question a été posée à nouveau quelques années plus tard et a de bien meilleures réponses: style personnalisé multi-navigateur pour le bouton de téléchargement de fichiers .
Dan Dascalescu
1
@DanDascalescu Je suis d'accord, si je me souviens bien (en 2011), il a eu des problèmes avec IE, probablement 6 ou 7. Je vais éditer cette réponse pour l'amener dans le futur maintenant.
alex le
Pourquoi serait-il préférable d'utiliser l'étiquette? Vous ne pouvez pas tabuler les étiquettes, de plus, un bouton a plus de sens pour moi qu'une étiquette pour activer une boîte de dialogue.
Louis-Marie Matthews
1
@alex, il n'affiche pas le nom du fichier.
Naren Verma
33

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>
Konservin
la source
1
Dans ce cas, ie 9 ne permettra pas d'envoyer le formulaire à iframe.
x-yuri
@ x-yuri que voulez-vous dire?
Micaël Félix
2
Autant que je me souvienne, c'est-à-dire 9 (et probablement d'autres) ne permettra pas d'envoyer le formulaire à iframe, car l'utilisateur n'a pas cliqué sur le fichier d'entrée.
x-yuri
display: nonesupprimera l'entrée de l'ordre de tabulation, rendant la page moins accessible. L'utilisation <label>(comme le montre Tympanus) est beaucoup plus sémantique et moins hacky. En outre, cette question a été posée à nouveau quelques années plus tard et a de bien meilleures réponses: style personnalisé multi-navigateur pour le bouton de téléchargement de fichiers .
Dan Dascalescu du
Correction d'une faute de frappe entre crochets fermants dans un sélecteur pour que le code fonctionne réellement
Constantin Groß
23
  <label for="fusk">dsfdsfsd</label>
  <input id="fusk" type="file" name="photo" style="display: none;">

pourquoi pas? ^ _ ^

Voir l'exemple ici

jt3k
la source
4
@InakiIbarrolaAtxa pouvez-vous fournir des données à l'appui?
Ben Leggiero
1
Ne stylise rien dans Chrome 51. Utiliser <label>(comme le montre Tympanus) est une solution sémantiquement correcte. En outre, cette question a été posée à nouveau quelques années plus tard et a de bien meilleures réponses: style personnalisé multi-navigateur pour le bouton de téléchargement de fichiers .
Dan Dascalescu
12

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 inférieurs http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/

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

Ouadie
la source
Bien que ce lien puisse répondre à la question, il est préférable d'inclure les parties essentielles de la réponse ici et de fournir le lien pour référence. Les réponses aux liens uniquement peuvent devenir invalides si la page liée change. - De l'avis
Tom
Terminé, je viens d'inclure un exemple
Ouadie
10

Le moyen le plus simple.

<label>
     Upload
    <input type="file" style="visibility: hidden;"/>
</label>
caden311
la source
Comment se fait-il que personne ne l'ait remarqué.
rootExplorr
1
J'étais en retard au match
caden311
6

Dans Webkit, vous pouvez essayer ceci ...

input[type="file"]::-webkit-file-upload-button{
   /* style goes here */
}
Christopher Reid
la source
connaissez-vous une solution similaire pour Firefox? Existe-t-il? )
Artem Z.
5

tout d'abord c'est un conteneur:

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

Le second, c'est un style CSS, si vous voulez vraiment 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, cela dépend de la taille de la police, corrigez simplement les valeurs de hauteur et de remplissage du haut du conteneur

Juri Karasjov
la source
Je me demande pourquoi tu ne le fais pas right: 0, au lieu de left: 0? De cette façon, vous auriez la zone de texte ie hors du conteneur. Cliquer sur la zone de texte n'ouvre pas la boîte de dialogue de sélection de fichier. De plus, je pense que créer un fichier d'entrée volumineux avec font-sizeest une bien meilleure idée, puis utiliser widthet height.
x-yuri
5

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

entrez la description de l'image ici

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 consulter cet exemple: https://jsfiddle.net/rjurado/hnf0zhy1/4/

drinor
la source
J'aime la façon dont le vôtre utilise une icône Font Awesome, contrairement aux autres.
Max Voisard
4

C'est beaucoup mieux si vous utilisez simplement a <label>, masquez <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 */
}
Bogdan M.
la source
display: nonesupprimera l'élément de l'ordre de tabulation. Utiliser <label>(comme le montre Tympanus) est la méthode sémantiquement correcte, mais nécessite quelques améliorations. En outre, cette question a été posée à nouveau quelques années plus tard et a de bien meilleures réponses: style personnalisé multi-navigateur pour le bouton de téléchargement de fichiers .
Dan Dascalescu
2

pour afficher le chemin du fichier sélectionné, vous pouvez essayer ceci 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;
}
saghar.fadaei
la source
Salam Saghar, c'était la meilleure réponse pour moi, merci
ucMedia
2

Exemple de bootstrap

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

J'ai opté pour cette option qui clarifie comment personnaliser entièrement le bouton de navigation en incluant un gestionnaire du nom du fichier téléchargé, également personnalisé. Il ajoute des champs supplémentaires et des contrôles côté client sur eux juste pour montrer comment inclure la navigation sous une forme "réelle", pas seulement autonome.

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>

Emi-C
la source
0

Voici une manière que j'aime car elle fait remplir 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;
}
Vanja
la source
Il est logique de le faireposition: absolute; right: 0; font-size: <many>px;
x-yuri
0

Vous pouvez les styliser, mais vous ne pouvez pas supprimer les éléments qui s'y trouvent déjà. 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 vous ressemble!

Ben Leggiero
la source
1
Ne stylise pas les mots «Choisissez un fichier». L'utilisation <label>(comme le montre Tympanus) est sémantique et offre une personnalisation complète. En outre, cette question a été posée à nouveau quelques années plus tard et a de bien meilleures réponses: style personnalisé multi-navigateur pour le bouton de téléchargement de fichiers .
Dan Dascalescu
1
@DanDascalescu Vous avez raison! J'offre juste une solution purement CSS, au cas où vous ne pourriez pas changer le HTML avec votre configuration.
Ben Leggiero
0

Stylisez simplement un bouton normal comme vous le souhaitez, en utilisant votre CSS préféré.

Appelez ensuite une fonction JS simple pour créer et lier un élément d'entrée masqué à votre bouton stylisé. 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 lie à nouveau après chaque fois que l'utilisateur choisit un fichier. Ceci est important car "onchange" n'est appelé que si l'utilisateur modifie le nom du fichier. Mais vous souhaitez probablement obtenir le fichier chaque fois que l'utilisateur le fournit.

Pour plus de détails, recherchez les téléchargements DropZone et Gmail.

personal_cloud
la source
0

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

Ceci est mon téléchargement / pièce jointe de fichier customerized entièrement fonctionnel en utilisant jquery et javascript (Visual studio). Ce sera utile!

Le code sera disponible dans la section commentaires!

Lien: https://youtu.be/It38OzMAeig

Prendre plaisir :)

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

Milan Madubasha
la source
0

Voici une solution de contournement CSS pure et rapide (fonctionne sur chrome et inclut une solution de secours FireFox), y compris le nom du fichier, une étiquette et un bouton de téléchargement personnalisé, fait ce qu'il faut - pas besoin de JavaScript du tout! 🎉

Remarque: ☝ Cela fonctionne sur Chrome et a une solution de secours FireFox - de toute façon, je ne l'utiliserais pas sur un site Web réel - si la compatibilité du navigateur est une chose pour vous (ce qu'elle devrait être). C'est donc plus expérimental.

.fileUploadInput {
  display: grid;
  grid-gap: 10px;
  position: relative;
  z-index: 1; }
  
  .fileUploadInput label {
    display: flex;
    align-items: center;
    color: setColor(primary, 0.5);
    background: setColor(white);
    transition: .4s ease;
    font-family: arial, sans-serif;
    font-size: .75em;
    font-weight: regular; }
    
  .fileUploadInput input {
    position: relative;
    z-index: 1;
    padding: 0 gap(m);
    width: 100%;
    height: 50px;
    border: 1px solid #323262;
    border-radius: 3px;
    font-family: arial, sans-serif;
    font-size: 1rem;
    font-weight: regular; }
    .fileUploadInput input[type="file"] {
      padding: 0 gap(m); }
      .fileUploadInput input[type="file"]::-webkit-file-upload-button {
        visibility: hidden;
        margin-left: 10px;
        padding: 0;
        height: 50px;
        width: 0; }
        
  .fileUploadInput button {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 50px;
    height: 50px;
    line-height: 0;
    user-select: none;
    color: white;
    background-color: #323262;
    border-radius: 0 3px 3px 0;
    font-family: arial, sans-serif;
    font-size: 1rem;
    font-weight: 800; }
    .fileUploadInput button svg {
      width: auto;
      height: 50%; }

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  border: 0px;
  outline: 0;
  background-repeat: no-repeat;
  appearance: none;
  border-radius: 0;
  vertical-align: middle;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  text-decoration: none;
  list-style: none;
  user-select: text;
  line-height: 1.333em; }

body {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  background: rgba(66, 50, 98, 0.05); }

.container {
  padding: 25px;
  box-shadow: 0 0 20px rgba(66, 50, 98, 0.35);
  border: 1px solid #eaeaea;
  border-radius: 3px;
  background: white; }

@-moz-document url-prefix() {
.fileUploadInput button{
    display: none
}
}
<!-- Author: Ali Soueidan-->
<!-- Author URI: https//: www.alisoueidan.com-->

<div class="container">
    <div class="fileUploadInput">
    <label>✨ Upload File</label>
    <input type="file" />
    <button>+</button></div>
</div>

Lazercaveman
la source
-2

Voici une façon que j'ai récemment découverte, 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 «ancre» pour déclencher le téléchargement du fichier. Vous pouvez remplacer par 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 de toute autre source

Aakash
la source
display: nonesupprimera l'entrée de l'ordre de tabulation. L'utilisation <label>(comme le montre Tympanus) est beaucoup plus sémantique et moins hacky. En outre, cette question a été posée à nouveau quelques années plus tard et a de bien meilleures réponses: style personnalisé multi-navigateur pour le bouton de téléchargement de fichiers .
Dan Dascalescu