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

164

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

Newbie Coder
źródło
Powodem tego pola tekstowego jest to, że pokazuje ono użytkownikowi ścieżkę do pliku po przejrzeniu i wybraniu pliku.
k do z
Ups ... wygląda na to, że Firefox tak to obsługuje ...
Newbie Coder
Abyśmy byli jasni, nawet po przejrzeniu pliku nadal muszą przesłać formularz za pomocą przycisku przesyłania formularza.
k do z
2
Zapoznaj się z tym rozwiązaniem, aby uzyskać o wiele prostszy sposób.
Joeytje50
1
Oznaczanie przyszłego pytania jako duplikatu starszego jest trochę dziwne. Czy nada priorytet, że ponowne zadawanie pytań, a następnie zamykanie oryginalnych jest w porządku? Duplikaty są już tutaj dużym problemem. Widzę wartość ponownego zadawania pytania, w przypadku którego istniejące odpowiedzi przestały być aktualne , ale zawsze można edytować pytanie i dodawać / edytować nowe odpowiedzi.
Alex

Odpowiedzi:

235

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.

Alex
źródło
2
Uważam, że są to lepsze style, biorąc pod uwagę, że staramy się, aby okno dialogowe wyboru pliku było otwierane przez kliknięcie w dowolnym miejscu kontenera:#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
Używanie <label>(jak pokazuje Tympanus) jest znacznie bardziej semantyczne i mniej hakerskie. Również to pytanie zostało ponownie zadane kilka lat później i ma tam znacznie lepsze odpowiedzi: niestandardowy styl przycisku przesyłania plików w różnych przeglądarkach .
Dan Dascalescu
1
@DanDascalescu Zgadzam się, jeśli dobrze pamiętam (jeszcze w 2011 r.) Miałem problemy z IE, prawdopodobnie 6 lub 7. Zmienię tę odpowiedź, aby teraz przenieść ją na przyszłość.
Alex
Dlaczego lepiej byłoby używać etykiety? Nie możesz zakładać etykiet, poza tym przycisk ma dla mnie większy sens niż etykieta do aktywowania okna dialogowego.
Louis-Marie Matthews
1
@alex, nie wyświetla nazwy pliku.
Naren Verma,
33

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>
Konservin
źródło
1
W tym przypadku np. 9 nie pozwoli na wysłanie formularza do iframe.
x-yuri
@ x-yuri co masz na myśli?
Micaël Félix
2
O ile pamiętam, tj. 9 (i prawdopodobnie inne) nie pozwoli na wysłanie formularza do iframe, ponieważ użytkownik nie kliknął pliku wejściowego.
x-yuri
display: noneusunie dane wejściowe z kolejności zakładek, czyniąc stronę mniej dostępną. Używanie <label>(jak pokazuje Tympanus) jest znacznie bardziej semantyczne i mniej hakerskie. Również to pytanie zostało ponownie zadane kilka lat później i ma tam znacznie lepsze odpowiedzi: niestandardowy styl przycisku przesyłania plików w różnych przeglądarkach .
Dan Dascalescu
poprawiono literówkę zamykającą nawias kwadratowy w selektorze, aby kod faktycznie działał
Constantin Groß
23
  <label for="fusk">dsfdsfsd</label>
  <input id="fusk" type="file" name="photo" style="display: none;">

Dlaczego nie? ^ _ ^

Zobacz przykład tutaj

jt3k
źródło
4
@InakiIbarrolaAtxa Czy możesz podać dane, które to potwierdzą?
Ben Leggiero
1
Nie stylizuje w Chrome 51. Używanie <label>(jak pokazuje Tympanus) jest semantycznie poprawnym rozwiązaniem. Również to pytanie zostało ponownie zadane kilka lat później i ma tam znacznie lepsze odpowiedzi: niestandardowy styl przycisku przesyłania plików w różnych przeglądarkach .
Dan Dascalescu
12

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

Ouadie
źródło
Chociaż ten link może odpowiedzieć na pytanie, lepiej jest zawrzeć tutaj zasadnicze części odpowiedzi i podać link do odniesienia. Odpowiedzi zawierające tylko łącze mogą stać się nieprawidłowe, jeśli połączona strona ulegnie zmianie. - Z recenzji
Tom
Gotowe, właśnie dołączyłem przykład
Ouadie,
10

Najprostszy sposób..

<label>
     Upload
    <input type="file" style="visibility: hidden;"/>
</label>
caden311
źródło
Dlaczego nikt tego nie zauważył.
rootExplorr
1
Spóźniłem się na mecz
caden311
6

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

input[type="file"]::-webkit-file-upload-button{
   /* style goes here */
}
Christophera Reida
źródło
czy znasz jakieś podobne rozwiązanie dla przeglądarki Firefox? Czy to istnieje ? )
Artem Z.
5

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

Juri Karasjov
źródło
Zastanawiam się, dlaczego tego nie zrobisz right: 0, zamiast tego left: 0? W ten sposób będziesz mieć pole tekstowe ie z kontenera. Kliknięcie pola tekstowego nie otwiera okna dialogowego wyboru pliku. Uważam również, że zwiększenie rozmiaru pliku wejściowego za pomocą font-sizejest znacznie lepszym pomysłem niż użycie widthi height.
x-yuri
5

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

wprowadź opis obrazu tutaj

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/

drinor
źródło
Podoba mi się, jak twoja używa ikony Font Awesome, w przeciwieństwie do innych.
Max Voisard
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 */
}
Bogdan M.
źródło
display: noneusunie element z kolejności tabulacji. Używanie <label>(jak pokazuje Tympanus) jest semantycznie poprawne, ale wymaga pewnych doprecyzowań. Również to pytanie zostało ponownie zadane kilka lat później i ma tam znacznie lepsze odpowiedzi: niestandardowy styl przycisku przesyłania plików w różnych przeglądarkach .
Dan Dascalescu
2

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;
}
saghar.fadaei
źródło
Salam saghar, To była dla mnie najlepsza odpowiedź, dzięki
ucMedia
2

Przykład Bootstrap

<label className="btn btn-info btn-lg">
  Upload
  <input type="file" style="display: none" />
</label>
juliankmazo
źródło
1

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>

Emi-C
źródło
0

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;
}
Vanja
źródło
To ma sensposition: absolute; right: 0; font-size: <many>px;
x-yuri
0

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!

Ben Leggiero
źródło
1
Nie stylizuje słów „Wybierz plik”. Używanie <label>(jak pokazuje Tympanus) jest semantyczne i zapewnia pełną konfigurowalność. Również to pytanie zostało ponownie zadane kilka lat później i ma tam znacznie lepsze odpowiedzi: niestandardowy styl przycisku przesyłania plików w różnych przeglądarkach .
Dan Dascalescu
1
@DanDascalescu Masz rację! Oferuję tylko rozwiązanie oparte na CSS, na wypadek, gdybyś nie mógł zmienić HTML za pomocą swojej konfiguracji.
Ben Leggiero
0

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.

personal_cloud
źródło
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>

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>

Milan Madubasha
źródło
0

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>

lazercaveman
źródło
-2

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

Aakash
źródło
display: noneusunie dane wejściowe z kolejności tabulatorów. Używanie <label>(jak pokazuje Tympanus) jest znacznie bardziej semantyczne i mniej hakerskie. Również to pytanie zostało ponownie zadane kilka lat później i ma tam znacznie lepsze odpowiedzi: niestandardowy styl przycisku przesyłania plików w różnych przeglądarkach .
Dan Dascalescu