Jak dostosować <input type = „file”>?

Czy można zmienić wygląd <input type="file">?

Nie możesz wiele zmienić w input[type=file]samej kontrolce.

Ponieważ kliknięcie labelelementu poprawnie sparowanego z wejściem spowoduje aktywację / skupienie go, możemy użyć a, labelaby wywołać okno dialogowe przeglądania systemu operacyjnego.

Oto, jak możesz to zrobić…

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

CSS dla formantu formularza sprawi, że będzie on niewidoczny i nie zajmie miejsca w układzie dokumentu, ale nadal będzie istniał, więc można go aktywować za pomocą label.

Jeśli po zaznaczeniu chcesz wyświetlić wybraną przez użytkownika ścieżkę, możesz nasłuchiwać changezdarzenia za pomocą JavaScript, a następnie odczytać ścieżkę, którą udostępnia Ci przeglądarka (ze względów bezpieczeństwa może okłamać Cię co do dokładnej ścieżki). Sposobem na uatrakcyjnienie go dla użytkownika końcowego jest po prostu użycie podstawowej nazwy zwracanej ścieżki (aby użytkownik po prostu widział wybraną nazwę pliku).

Jest świetny przewodnik Tympanusa na temat stylizacji tego.

Może coś takiego?

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

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

Dlaczego nie? ^ _ ^

Zobacz przykład tutaj

Jeśli używasz bootstrap, tutaj jest lepsze rozwiązanie:

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

Dla IE8 i starszych http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/

Źródło: https://stackoverflow.com/a/18164555/625952

Najprostszy sposób..

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

W zestawie internetowym możesz to wypróbować ...

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

przede wszystkim jest to kontener:

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

Po drugie, to styl CSS, jeśli chcesz naprawdę bardziej dostosować, wystarczy mieć otwarte oczy :)

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

Ten przykład nie ma stylu dla tekstu wewnątrz przycisku, zależy to od rozmiaru czcionki, po prostu popraw wysokość i górne wartości dopełnienia dla kontenera

Sztuczka polega na ukryciu danych wejściowych i dostosowaniu etykiety.

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

Możesz sprawdzić ten przykład: https://jsfiddle.net/rjurado/hnf0zhy1/4/

O wiele lepiej, jeśli po prostu użyjesz <label>, ukryjesz <input>i dostosujesz etykietę.

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 */
}

aby pokazać ścieżkę do wybranego pliku, możesz spróbować tego na html:

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

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

i styl:

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

Przykład Bootstrap

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

Wybrałem tę opcję, która wyjaśnia, jak w pełni dostosować przycisk przeglądania, dołączając moduł obsługi przesłanej nazwy pliku, również dostosowany. Dodaje do nich dodatkowe pola i kontrolki po stronie klienta, aby pokazać, jak uwzględnić przeglądanie w „prawdziwej” formie, a nie tylko samodzielnej.

Oto kod: 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>

Oto jeden ze sposobów, który mi się podoba, ponieważ sprawia, że ​​dane wejściowe wypełniają cały kontener. Sztuczka polega na tym, że „font-size: 100px” musi iść w parze z „overflow: hidden” i pozycją względną.

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

Możesz je stylizować, ale nie możesz usunąć elementów, które już tam są. Jeśli jesteś kreatywny, możesz z tym popracować i zrobić coś takiego:

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/

Proponuję pobawić się tym kodem, usunąć linie, dodać własne, robić cokolwiek, aż uzyskasz coś, co wygląda tak, jak lubisz!

Po prostu stylizuj normalny przycisk, jak chcesz, używając swojego ulubionego CSS.

Następnie wywołaj prostą funkcję JS, aby utworzyć i połączyć ukryty element wejściowy z przyciskiem ze stylem. Nie dodawaj arkusza CSS specyficznego dla przeglądarki, aby wykonać ukrytą część.

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

Zwróć uwagę, jak powyższy kod ponownie łączy go po każdym wybraniu pliku przez użytkownika. Jest to ważne, ponieważ „onchange” jest wywoływane tylko wtedy, gdy użytkownik zmieni nazwę pliku. Ale prawdopodobnie chcesz pobierać plik za każdym razem, gdy użytkownik go udostępni.

Aby uzyskać więcej informacji, zapoznaj się z tematem przesyłania do DropZone i Gmaila.

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

To jest moje w pełni funkcjonalne przesyłanie / załączanie plików klienta za pomocą jquery i javascript (Visual studio). To się przyda!

Kod będzie dostępny w sekcji komentarzy!

Link: https://youtu.be/It38OzMAeig

Cieszyć się :)

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

Oto szybkie obejście czystego CSS (działa na Chrome i zawiera rezerwę FireFox), w tym nazwa pliku, etykieta i niestandardowy przycisk przesyłania, robi to, co powinno - w ogóle nie potrzeba JavaScript! 🎉

Uwaga: ☝ Działa to w Chrome i ma rezerwę FireFox - w każdym razie nie użyłbym go na prawdziwej stronie internetowej - jeśli kompatybilność przeglądarki jest dla ciebie ważna (co powinna być). Więc jest to bardziej eksperymentalne.

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

Oto jeden ze sposobów, który niedawno odkryłem, z odrobiną jQuery

Kod HTML:

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

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

W przypadku części javascript / jQuery:

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

W tym przykładzie umieściłem tag „kotwica”, aby uruchomić przesyłanie pliku. Możesz zamienić na cokolwiek zechcesz, pamiętaj tylko o nadaniu atrybutu „onclick” odpowiedniej funkcji.

Mam nadzieję że to pomoże!

PS: Nie zapomnij dołączyć jQuery z CDN lub innego źródła