Styl typu wejścia = przycisk „plik”

733

Jak stylizujesz type="file"przycisk wprowadzania ?

Shivanand
źródło
Dodam własną odpowiedź, aby zrobić to tak, jak zrobiłem ... ale oto przykład oparty na bootstrapie, który może pomóc .. geniuscarrier.com/
Vishnu Narang

Odpowiedzi:

235

Styl wprowadzania danych wejściowych plików jest niezwykle trudny, ponieważ większość przeglądarek nie zmieni wyglądu zarówno z CSS, jak i javascript.

Nawet rozmiar danych wejściowych nie będzie odpowiadał:

<input type="file" style="width:200px">

Zamiast tego musisz użyć atrybutu size:

<input type="file" size="60" />

W przypadku każdego bardziej zaawansowanego stylu (np. Zmiana wyglądu przycisku przeglądania) należy przyjrzeć się podstępnemu podejściu polegającemu na nakładaniu stylowego przycisku i pola wprowadzania na natywny plik wejściowy. Artykuł wspomniany już przez rm na www.quirksmode.org/dom/inputfile.html jest najlepszym, jaki widziałem.

AKTUALIZACJA

Chociaż trudno jest <input>bezpośrednio stylizować znacznik, jest to łatwo możliwe za pomocą <label>znacznika. Zobacz odpowiedź poniżej z @JoshCrozier: https://stackoverflow.com/a/25825731/10128619

Jonathan Moffatt
źródło
7
Właśnie znalazłem rozwiązanie jquery oparte na tym skrypcie tutaj: blog.vworld.at/2008/08/21/…
mtness
1
@TLK Odpowiedź Ryana nie będzie działać w IE podczas próby przesłania iframe. Daje błąd odmowy dostępu. Zgadzam się, że w przypadku normalnego przesyłania jest to najłatwiejsze!
frostymarvellous
3
Wyjaśniono tutaj znacznie prostsze rozwiązanie niż tryb quirksmode . Po prostu umieszczam ten link tutaj, ponieważ ta odpowiedź i tak jest w zasadzie tylko linkiem.
Joeytje50
10
Wszystkim zainteresowanym nowoczesnym podejściem proponuję przyjrzeć się tej odpowiedzi . Nie wymaga JavaScript, podobnie jak niektóre inne odpowiedzi.
Josh Crozier
3
@JoshCrozier opublikował niesamowicie lepsze rozwiązanie. Nawet bije fałszywe rozwiązania typu klikanie myszką :)
Lodewijk
1012

Nie potrzebujesz do tego JavaScript! Oto rozwiązanie dla różnych przeglądarek:

Zobacz ten przykład! - Działa w Chrome / FF / IE - (IE10 / 9/8/7)

Najlepszym rozwiązaniem byłoby posiadanie niestandardowego elementu etykiety z foratrybutem dołączonego do ukrytego elementu wejściowego pliku. (Aby foratrybut iddziałał , atrybut etykiety musi pasować do elementu pliku ).

<label for="file-upload" class="custom-file-upload">
    Custom Upload
</label>
<input id="file-upload" type="file"/>

Alternatywnie można również po prostu owinąć element wejściowy pliku etykietą bezpośrednio: (przykład)

<label class="custom-file-upload">
    <input type="file"/>
    Custom Upload
</label>

Jeśli chodzi o styl, po prostu ukryj 1 element wejściowy za pomocą selektora atrybutów .

input[type="file"] {
    display: none;
}

Następnie wszystko, co musisz zrobić, to styl niestandardowego labelelementu. (przykład) .

.custom-file-upload {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
}

1 - Warto zauważyć, że jeśli ukryjesz element za pomocą display: none, nie będzie działał w IE8 i niższych. Należy również pamiętać, że jQuery nie sprawdza domyślnie ukrytych pól . Jeśli jedna z tych rzeczy jest dla Ciebie problemem, oto dwie różne metody ukrywania danych wejściowych ( 1 , 2 ), które działają w takich okolicznościach.

Josh Crozier
źródło
43
Mam jednak pytanie dotyczące tego, kiedy wybierając plik, jak byśmy sobie poszli, a następnie wyświetlając nazwę pliku?
Richlewis,
17
Jak wyświetlić nazwę wybranego pliku, jeśli display: nonejest ustawiony na input[type=file]?
Sarthak Singhal,
38
Świetne rozwiązanie, ale tak naprawdę potrzebujesz javascript. Jeśli chcesz wyświetlić nazwę pliku, jak pytają inne osoby, musisz dodać rozpiętość między etykietą a ukrytym wejściem: <span id = "file-selected"> </span>. Następnie zaktualizuj zakres zdarzenia zmiany: $ ('# file-upload'). Bind ('change', function () {var fileName = ''; fileName = $ (this) .val (); $ ('# file-selected '). html (fileName);})
Sam
9
Powinieneś używać position: absolute; left: -99999remzamiast ze względu display: nonena dostępność. Przez większość czasu czytniki ekranu nie będą czytać elementów, jeśli są one ukryte za pomocą display: nonemetody.
Kapsułka
10
Jestem bardzo zaskoczony, że nikt nie wziął pod uwagę dostępności klawiatury. labelelementy nie są dostępne z klawiatury, w przeciwieństwie do buttons i inputs. Dodawanie tabindexnie jest rozwiązaniem, ponieważ labelnadal nie będzie wykonywane, gdy jest ono aktywne i użytkownik naciska klawisz Enter. Rozwiązałem to, wizualnie ukrywając dane wejściowe, dzięki czemu można je nadal skupić , a następnie użyć :focus-withinna elemencielabel macierzystym: jsbin.com/fokexoc/2/edit?html,css,output
Oliver Joseph Ash,
195

wykonaj następujące kroki, aby utworzyć niestandardowe style formularza przesyłania plików:

  1. to jest prosty formularz HTML (proszę przeczytać komentarze HTML, które napisałem tutaj poniżej)

    <form action="#type your action here" method="POST" enctype="multipart/form-data">
      <div id="yourBtn" style="height: 50px; width: 100px;border: 1px dashed #BBB; cursor:pointer;" onclick="getFile()">Click to upload!</div>
      <!-- this is your file input tag, so i hide it!-->
      <div style='height: 0px;width:0px; overflow:hidden;'><input id="upfile" type="file" value="upload"/></div>
      <!-- here you can have file submit button or you can write a simple script to upload the file automatically-->
      <input type="submit" value='submit' >
    </form>
  2. następnie użyj tego prostego skryptu, aby przekazać zdarzenie click do znacznika wejściowego pliku.

    function getFile(){
         document.getElementById("upfile").click();
    }

    Teraz możesz używać dowolnego rodzaju stylizacji bez obawy o zmianę domyślnych stylów.

Wiem to bardzo dobrze, ponieważ od półtora miesiąca próbuję zmienić domyślne style. uwierz mi, to bardzo trudne, ponieważ różne przeglądarki mają różne znaczniki wejściowe przesyłania. Użyj tego, aby zbudować niestandardowe formularze przesyłania plików. Oto pełny kod AUTOMATYCZNEGO PRZESYŁANIA.

function getFile() {
  document.getElementById("upfile").click();
}

function sub(obj) {
  var file = obj.value;
  var fileName = file.split("\\");
  document.getElementById("yourBtn").innerHTML = fileName[fileName.length - 1];
  document.myForm.submit();
  event.preventDefault();
}
#yourBtn {
  position: relative;
  top: 150px;
  font-family: calibri;
  width: 150px;
  padding: 10px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border: 1px dashed #BBB;
  text-align: center;
  background-color: #DDD;
  cursor: pointer;
}
<form action="#type your action here" method="POST" enctype="multipart/form-data" name="myForm">
  <div id="yourBtn" onclick="getFile()">click to upload a file</div>
  <!-- this is your file input tag, so i hide it!-->
  <!-- i used the onchange event to fire the form submission-->
  <div style='height: 0px;width: 0px; overflow:hidden;'><input id="upfile" type="file" value="upload" onchange="sub(this)" /></div>
  <!-- here you can have file submit button or you can write a simple script to upload the file automatically-->
  <!-- <input type="submit" value='submit' > -->
</form>

teshguru
źródło
6
@ user1053263 -> Dzięki za rekomendację .. tutaj użyłem bardzo prostego skryptu Java, nie trzeba używać frameworków takich jak Jquery lub PrototypeJS.
teshguru,
7
Mam problem z przesłaniem formularza w IE9. Otrzymuję błąd „Odmowa dostępu”, który próbuje wysłać formularz za pomocą javascript. Jeśli kliknę przycisk Prześlij za pośrednictwem interfejsu użytkownika, działa. Czy jest na to jakiś sposób?
Kevin
1
@kevin -> Spróbuj event.preventDefault () po document.myForm.submit (), dokonałem zmiany powyższego kodu.
teshguru
1
Działa dobrze w Chrome, Firefox, Safari i Opera - ale nie w IE9. W IE9 pojawia się ten sam błąd „Odmowa dostępu” jak @Kevin - a czasami tylko cicha awaria bez błędu.
daveywc
10
W IE10 (i ewentualnie IE9 itd.) Otrzymasz komunikat „Odmowa dostępu” (lub brak odpowiedzi od jQuery), jeśli spróbujesz automatycznie przesłać formularz po kliknięciu przycisku wprowadzania pliku za pomocą javascript. Tak więc ta metoda działa na stylizację przycisku wprowadzania pliku, o ile użytkownik wciąż przesyła formularz. Zajęło mi to chwilę, aby to znaleźć, i widzę, że inni również mają ten sam problem. Zobacz to, aby uzyskać więcej informacji stackoverflow.com/a/4335390/21579 .
Jeff Widmer
76

Ukryj go za pomocą css i użyj niestandardowego przycisku za pomocą $ (selektor). Kliknij (), aby aktywować przycisk przeglądania. następnie ustaw interwał, aby sprawdzić wartość typu pliku wejściowego. interwał może wyświetlać wartość dla użytkownika, aby użytkownik mógł zobaczyć, co jest przesyłane. interwał zniknie po przesłaniu formularza [EDYCJA] Przepraszam, że byłem bardzo zajęty chciałem zaktualizować ten post, oto przykład

<form action="uploadScript.php" method="post" enctype="multipart/form-data">
<div>
    <!-- filename to display to the user -->
    <p id="file-name" class="margin-10 bold-10"></p>

    <!-- Hide this from the users view with css display:none; -->
    <input class="display-none" id="file-type" type="file" size="4" name="file"/>

    <!-- Style this button with type image or css whatever you wish -->
    <input id="browse-click" type="button" class="button" value="Browse for files"/>

    <!-- submit button -->
    <input type="submit" class="button" value="Change"/>
</div>

$(window).load(function () {
    var intervalFunc = function () {
        $('#file-name').html($('#file-type').val());
    };
    $('#browse-click').on('click', function () { // use .live() for older versions of jQuery
        $('#file-type').click();
        setInterval(intervalFunc, 1);
        return false;
    });
});
Ryan
źródło
7
Pamiętaj, że jeśli użyjesz tej metody, spowoduje to
awarię przeglądarki
1
dzięki wskazówka. Kiedy używam IE, zwykle ma on osobny układ do wszystkiego innego. NIENAWIDZ IE. ale upraszczam wszystko w IE.
Ryan
1
W FF20 $ („# file-type”). Click () nie wydaje się wywoływać pokrętła „Wybierz plik” - w rzeczywistości nic się nie dzieje. Jakieś pomysły?
andig
2
Spróbuj użyć metody wyzwalacza w jquery. Również .live zmieniono na .on () w nowej jquery
Ryan
1
po ustawieniu tego przedziału, w którym momencie mogę go wyczyścić? w przeciwnym razie będzie ciągle strzelał
Dave Haigh
60

HTML

<div class="new_Btn">SelectPicture</div><br>
<input id="html_btn" type='file'" /><br>

CSS

.new_Btn {
// your css propterties
}

#html_btn {
 display:none;
}

jQuery

$('.new_Btn').bind("click" , function () {
        $('#html_btn').click();
    });
//edit: 6/20/2014: Be sure to use ".on" not ".bind" for newer versions of jQuery

Fiddle : http://jsfiddle.net/M7BXC/

Możesz osiągnąć swoje cele również bez jQuery z normalnym JavaScript.

Teraz newBtn łączy się z html_btn i możesz stylizować swój nowy btn tak, jak chcesz: D

Wykk
źródło
1
Ciekawe, czy działa w każdej przeglądarce nowej generacji, takiej jak Firefox, IE, Opera, Safari, Chrome itp.?
Wh1T3h4Ck5
To jest dla mnie najprostsze rozwiązanie! Przynajmniej w IE 9, Chrome 23 i FF 16 z jQuery 1.7.2, więc przy zaktualizowanych wersjach powinien działać.
Dani BISKUP
Czy ktoś wie, jak zmienić .new_Btn na wypadek, gdyby użytkownik wybrał obraz. Teraz pokazuje tylko tę samą klasę. Czy ktoś wie, jak to śledzić? Dzięki
Ando
2
@MehdiKaramosly działa nawet na IE 6 - ale to prawda tylko do jQuery 1.x , jQuery 2.x + nie obsługuje starych IE
jave.web
1
@Ando przez Javascript / jQuery => wartość wejściowa pliku jest pusta lub zawiera lokalną ścieżkę pliku => użyj zdarzenia onchange i przetestuj dla val () :) patrz jsfiddle.net/ZrBPF
jave.web
55

Wszystkie silniki renderujące automatycznie generują przycisk po <input type="file">utworzeniu. Historycznie ten przycisk był całkowicie nie do stylizacji. Jednak Trident i WebKit dodały haki do pseudoelementów.

Trójząb

Począwszy od IE10, przycisk wprowadzania pliku może być stylizowany za pomocą ::-ms-browsepseudoelementu. Zasadniczo wszelkie reguły CSS, które stosujesz do zwykłego przycisku, można zastosować do pseudoelementu. Na przykład:

::-ms-browse {
  background: black;
  color: red;
  padding: 1em;
}
<input type="file">

W IE10 na Windows 8 wyświetla się to następująco:

W IE10 na Windows 8 wyświetla się to następująco:

WebKit

WebKit zapewnia zaczep dla przycisku wprowadzania pliku z ::-webkit-file-upload-buttonpseudoelementem. Ponownie, można zastosować prawie każdą regułę CSS, dlatego też przykład Trident będzie tutaj działał:

::-webkit-file-upload-button {
  background: black;
  color: red;
  padding: 1em;
}
<input type="file">

W Chrome 26 na OS X wyświetla się to w następujący sposób:

W Chrome 26 na OS X wyświetla się to w następujący sposób:

Anselm
źródło
Nie ma specjalnych możliwości stylizacji dla programów opartych na Gecko, takich jak Firefox.
Anselm
2
W odpowiedzi, używając css, jak ukryć słowo „Nie wybrano pliku” w znaczniku <input type = file>. Proszę o komentarz.
user2086641,
Przepraszam, nie mam pojęcia
Anselm,
1
źródło: tjvantoll.com/2013/04/15/…
Anselm
1
Na wypadek, gdyby ktoś chciał bawić się stylami, dodałem tutaj jsfidde
Peter Drinnan
26

Jeśli używasz Bootstrap 3, działało to dla mnie:

Zobacz http://www.abeautifulsite.net/whipping-file-inputs-into-shape-w--bootstrap-3/

.btn-file {
  position: relative;
  overflow: hidden;
}
.btn-file input[type=file] {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 100%;
  min-height: 100%;
  font-size: 100px;
  text-align: right;
  filter: alpha(opacity=0);
  opacity: 0;
  outline: none;
  background: white;
  cursor: inherit;
  display: block;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<span class="btn btn-primary btn-file">
    Browse...<input type="file">
</span>

Który tworzy następujący przycisk wprowadzania pliku:

Przykładowy przycisk

Poważnie, sprawdź http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/

JDawg
źródło
2
Zachowuje to funkcję przeciągania i upuszczania, która jest świetna :), większość odpowiedzi nie akceptuje upuszczonych plików.
A1rPun
25

Przykład działania tutaj z natywną obsługą przeciągania i upuszczania: https://jsfiddle.net/j40xvkb3/

Podczas stylizowania wejścia pliku nie należy przerywać żadnej natywnej interakcji, jaką zapewnia wejście .

The display: nonePodejście zrywa rodzimą przeciągnij i upuść.

Aby niczego nie złamać, powinieneś użyć opacity: 0 metodę wprowadzania danych i ustawić ją za pomocą wzorca względnego / bezwzględnego w opakowaniu.

Korzystając z tej techniki, możesz z łatwością stylizować strefę kliknięcia / upuszczenia dla użytkownika i dodać niestandardową klasę w języku JavaScript do dragenterzdarzenia, aby zaktualizować style i przekazać użytkownikowi informację zwrotną, aby mógł zobaczyć, że może upuścić plik.

HTML:

<label for="test">
  <div>Click or drop something here</div>
  <input type="file" id="test">
</label>

CSS:

input[type="file"] {
  position: absolute;
  left: 0;
  opacity: 0;
  top: 0;
  bottom: 0;
  width: 100%;
}

div {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ccc;
  border: 3px dotted #bebebe;
  border-radius: 10px;
}

label {
  display: inline-block;
  position: relative;
  height: 100px;
  width: 400px;
}

Oto działający przykład (z dodatkowym JS do obsługi dragoverzdarzeń i upuszczanych plików).

https://jsfiddle.net/j40xvkb3/

Mam nadzieję, że to pomogło!

Kevcha
źródło
dzięki za post, jak to działa, jeśli dodany jest atrybut multiple = "multiple", przeciągnąłem 2 zdjęcia, ale widziałem ścieżkę tylko do pierwszego
PirateApp
Tutaj brakuje kodu. Jest więcej na skrzypcach. Jaka biblioteka?
ctrl-alt-delor,
Jest tylko javascript na skrzypcach z jQuery, aby pokazać pliki, które zostały upuszczone. To wszystko
kevcha,
Po wdrożeniu tego rozwiązania i przetestowaniu go dalej wydaje się, że nie działa również w Edge.
ChrisA
1
Ach, okej, brakowało mi opakowania z pozycją względną w twojej odpowiedzi - Mój zły. Jeśli dane wejściowe znajdują się poniżej wymiarów ekranu, przeglądarka próbuje je przewinąć i tym samym przesuwa kontener przewijania w górę strony. Oto demonstracja: stackblitz.com/edit/input-file-overflow?file=style.css (po prostu nie do końca pokazujący, w jaki sposób bezwzględna pozycja jest przyczyną zachowania)
Tom
23

Jestem w stanie to zrobić z czystym CSS, używając poniższego kodu. Użyłem bootstrap i niesamowitej czcionki.

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

<label class="btn btn-default btn-sm center-block btn-file">
  <i class="fa fa-upload fa-2x" aria-hidden="true"></i>
  <input type="file" style="display: none;">
</label>

Karthik
źródło
21
 <label>
    <input type="file" />
 </label>

Możesz owinąć swój typ wejściowy = „plik” wewnątrz etykiety dla danych wejściowych. Nadaj styl dowolną etykietę i ukryj dane wejściowe za pomocą display: none;

JGuo
źródło
Alternatywą może być gist.github.com/barneycarroll/5244258 lub jsfiddle.net/4cwpLvae (działa w IE11)
surfmuggle
12

Oto rozwiązanie, które tak naprawdę nie stylizuje <input type="file" />elementu, ale zamiast tego używa <input type="file" />elementu na wierzchu innych elementów (które można stylizować). The<input type="file" />Element nie jest bardzo widoczny stąd, całkowita iluzja jest ładnie stylizowany kontroli przesyłania plików.

Ostatnio natknąłem się na ten problem i pomimo mnóstwa odpowiedzi na Stack Overflow, żadne z nich naprawdę nie pasowało do rachunku. Ostatecznie dostosowałem to tak, aby uzyskać proste i eleganckie rozwiązanie.

Przetestowałem to również na Firefox, IE (11, 10 i 9), Chrome i Opera, iPad i kilka urządzeń z Androidem.

Oto link JSFiddle -> http://jsfiddle.net/umhva747/

$('input[type=file]').change(function(e) {
    $in = $(this);
    $in.next().html($in.val());
    
});

$('.uploadButton').click(function() {
    var fileName = $("#fileUpload").val();
    if (fileName) {
        alert(fileName + " can be uploaded.");
    }
    else {
        alert("Please select a file to upload");
    }
});
body {
    background-color:Black;
}

div.upload {
    background-color:#fff;
    border: 1px solid #ddd;
    border-radius:5px;
    display:inline-block;
    height: 30px;
    padding:3px 40px 3px 3px;
    position:relative;
    width: auto;
}

div.upload:hover {
    opacity:0.95;
}

div.upload input[type="file"] {
    display: input-block;
    width: 100%;
    height: 30px;
    opacity: 0;
    cursor:pointer;
    position:absolute;
    left:0;
}
.uploadButton {
    background-color: #425F9C;
    border: none;
    border-radius: 3px;
    color: #FFF;
    cursor:pointer;
    display: inline-block;
    height: 30px;
    margin-right:15px;
    width: auto;
    padding:0 20px;
    box-sizing: content-box;
}

.fileName {
    font-family: Arial;
    font-size:14px;
}

.upload + .uploadButton {
    height:38px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form action="" method="post" enctype="multipart/form-data">
    <div class="upload">
        <input type="button" class="uploadButton" value="Browse" />
        <input type="file" name="upload" accept="image/*" id="fileUpload" />
        <span class="fileName">Select file..</span>
    </div>
    <input type="button" class="uploadButton" value="Upload File" />
</form>

Mam nadzieję że to pomoże!!!

Satwik Nadkarny
źródło
2
Genialnie sprytne rozwiązanie tego nikczemnego stylu pobierania plików.
rmcsharry 10.09.16
Najlepsze ze wszystkich. Doskonały!!
Karra
11

Jest to proste dzięki jquery. Aby podać kodowy przykład sugestii Ryana z niewielką modyfikacją.

Podstawowy HTML:

<div id="image_icon"></div>
<div id="filename"></div>
<input id="the_real_file_input" name="foobar" type="file">

Pamiętaj, aby ustawić styl na wejściu, gdy będziesz gotowy: opacity: 0 nie możesz ustawić, display: noneponieważ musi być klikalny. Ale możesz ustawić go pod przyciskiem „nowy” lub schować pod czymś innym z indeksem Z, jeśli wolisz.

Skonfiguruj trochę jquery, aby kliknąć prawdziwe wejście po kliknięciu obrazu.

$('#image_icon').click(function() {
    $('#the_real_file_input').click();
});

Teraz twój przycisk działa. Po prostu wytnij i wklej wartość po zmianie.

$('input[type=file]').bind('change', function() {
    var str = "";
    str = $(this).val();
    $("#filename").text(str);
}).change();

Tah dah! Może być konieczne przetworzenie wartości val () na coś bardziej znaczącego, ale wszystko powinno być ustawione.

TLK
źródło
1
to się nie powiedzie z FF11 - powód: ponieważ nie możesz dokładnie wpływać na rozmiar pola wejściowego (tylko przy użyciu rozmiaru HTML) i przycisku (możesz ustawić wysokość za pomocą css), jeśli twoje widoczne pole wejściowe jest większe niż oryginalne FF zapewnia nam, pozostają z bardzo dużą ślepą strefą - punkt widzenia użytkownika: w większości przypadków narzeka, że ​​przesyłanie nie działa po kliknięciu
Jeffz
2
Dobry pomysł, ale to nie zadziała w IE. $ ('# the_real_file_input'). click () uruchomi otwarte okno dialogowe, ale plik nie zostanie wybrany do formularza i przesyłanie nie powiedzie się.
Tomas
11

Umieść przycisk przesyłania pliku na swoim ładnym przycisku lub elemencie i ukryj go.

Bardzo prosty i działa na dowolnej przeglądarce

<div class="upload-wrap">
    <button type="button" class="nice-button">upload_file</button>
    <input type="file" name="file" class="upload-btn">
</div>

Style

.upload-wrap {
    position: relative;
}

.upload-btn {
    position: absolute;
    left: 0;
    opacity: 0;
}
Tigran Babajanyan
źródło
8

WIDOCZNOŚĆ: ukryta sztuczka

Zwykle wybieram visibility:hiddenlewę

to jest mój przycisk w stylu

<div id="uploadbutton" class="btn btn-success btn-block">Upload</div>

jest to przycisk typu wejściowego = plik. Zwróć uwagę na visibility:hiddenzasadę

<input type="file" id="upload" style="visibility:hidden;">

jest to bit JavaScript, aby je skleić. To działa

<script>
 $('#uploadbutton').click(function(){
    $('input[type=file]').click();
 });
 </script>
Gianluca Ghettini
źródło
1
nie można użyć metody click () do uruchomienia zdarzenia dla pliku typu wejściowego. większość przeglądarki nie ze względów bezpieczeństwa nie zezwala
Mahi
nawet używając jquery? czy to jest poprawne? jak zrobiłbyś to zamiast tego?
Gianluca Ghettini
style="visibility:hidden"jest za długi, po prostu użyj hidden. click()Działa również w przypadku wszystkich przeglądarek i nie ma obecnie żadnego wiarygodnego powodu bezpieczeństwa, a na dowolnym urządzeniu jest to legalny sposób i @Gianluca do klasycznego użycia jQuerytrigger()
Thielicious
1
To jest właśnie rozwiązanie, które zamierzam do tego dodać! Działa i możesz wyświetlić go dokładnie tak, jak chcesz. Działa z Chrome, spróbuje innych.
markthewizard1234
7

jedynym sposobem, jaki mogę wymyślić, jest znalezienie przycisku z javascript po jego renderowaniu i przypisanie mu stylu

możesz także spojrzeć na ten opis

Roman m
źródło
Czysty CSS, bez JavaScript, działa we wszystkich przeglądarkach, aż do ie7 - super!
Simon Steinberger
7
<input type="file" name="media" style="display-none" onchange="document.media.submit()">

Zwykle używałbym prostego javascript do dostosowania znacznika wejściowego pliku. Ukryte pole wejściowe, po kliknięciu przycisku, wywołanie ukrytego pola javascript, proste rozwiązanie bez żadnego css lub wiązki jquery.

<button id="file" onclick="$('#file').click()">Upload File</button>
user2086641
źródło
1
nie można użyć click()metody do wywołania zdarzenia dla pliku typu wejściowego. większość przeglądarki nie pozwala ze względów bezpieczeństwa.
Mahi
6

Tutaj używamy zakresu do wyzwalania danych wejściowych pliku typu i po prostu dostosowujemy ten zakres , abyśmy mogli dodać dowolną stylizację w ten sposób.

Zauważ , że używamy tagu wejściowego z opcją widoczności: ukryty i uruchamiamy go w zakresie.

.attachFileSpan{
color:#2b6dad;
cursor:pointer;
}
.attachFileSpan:hover{
text-decoration: underline;
}
<h3> Customized input of type file </h3>
<input id="myInput" type="file" style="visibility:hidden"/>

        <span title="attach file" class="attachFileSpan" onclick="document.getElementById('myInput').click()">
        Attach file
        </span>

Odniesienie

Abdallah Okasha
źródło
5

To dobry sposób na zrobienie tego z przesyłaniem plików / plików kątowych. Możesz zrobić to samo z przyciskiem ładowania początkowego.

Uwaga: Użyłem <a>zamiast <button>tego pozwala, aby zdarzenia kliknięcia się w górę.

<label>
    <input type="file" (change)="setFile($event)" style="display:none" />

    <a mat-raised-button color="primary">
      <mat-icon>file_upload</mat-icon>
      Upload Document
    </a>

  </label>
Robert King
źródło
1
Działa to doskonale w kątach 2+. Nie jestem pewien, dlaczego przegłosowano. Jeśli używasz kątowego, jest to najprostsze dostępne rozwiązanie.
AndrewWhalan,
4

TYLKO CSS

Użyj tego bardzo prostego i ŁATWEGO

HTML:

<label>Attach your screenshort</label>
                <input type="file" multiple class="choose">

Css:

.choose::-webkit-file-upload-button {
    color: white;
    display: inline-block;
    background: #1CB6E0;
    border: none;
    padding: 7px 15px;
    font-weight: 700;
    border-radius: 3px;
    white-space: nowrap;
    cursor: pointer;
    font-size: 10pt;
}
Balvant Ahir
źródło
4

Może dużo napowietrzaczy. Ale podoba mi się to w czystym CSS z przyciskami fa:

.divs {
    position: relative;
    display: inline-block;
    background-color: #fcc;
}

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

.icons {
    position:relative;
}
<div class="divs">
<input type='file' id='image' class="inputs">
<i class="fa fa-image fa-2x icons"></i>
</div>

<div class="divs">
<input type='file' id='book' class="inputs">
<i class="fa fa-book fa-5x icons"></i>
</div>
<br><br><br>
<div class="divs">
<input type='file' id='data' class="inputs">
<i class="fa fa-id-card fa-3x icons"></i>
</div>





<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

Fiddle: https://jsfiddle.net/zoutepopcorn/v2zkbpay/1/

Johan Hoeksma
źródło
4

Nie daj się zwieść „świetnym” rozwiązaniom opartym wyłącznie na CSS, które w rzeczywistości są bardzo specyficzne dla przeglądarki lub które nakładają stylizowany przycisk na prawdziwy przycisk, lub które zmuszają cię do użycia <label>zamiast hakera <button>lub jakiegokolwiek innego takiego hacka . JavaScript jest niezbędny, aby działał do ogólnego użytku. Sprawdź, jak robią to Gmail i DropZone, jeśli mi nie wierzysz.

Wystarczy zaprojektować zwykły przycisk, jak chcesz, a następnie wywołać prostą funkcję JS, aby utworzyć ukryty element wejściowy i połączyć go ze stylizowanym przyciskiem.

<!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ływany tylko wtedy, gdy użytkownik zmieni nazwę pliku. Ale prawdopodobnie chcesz pobrać plik za każdym razem, gdy użytkownik go udostępni.

personal_cloud
źródło
1
Mówiąc ściślej, labelpodejście działa, ale nie może pokazać wybranej nazwy pliku lub ścieżki. Tak więc, koniecznie, to jedyny problem, który JS musi rozwiązać.
Hassan Baig
4

Rozwiązanie wielu plików ze skonwertowaną nazwą pliku

PRZYKŁAD Bootstrap

HTML:

<div>
  <label class="btn btn-primary search-file-btn">
    <input name="file1" type="file" style="display:None;"> <span>Choose file</span>
  </label>
  <span>No file selected</span>
</div>

<div>
  <label class="btn btn-primary search-file-btn">
    <input name="file2" type="file" style="display:None;"> <span>Choose file</span>
  </label>
  <span>No file selected</span>
</div>

1. JS z jQuery:

$().ready(function($){
    $('.search-file-btn').children("input").bind('change', function() {
    var fileName = '';
    fileName = $(this).val().split("\\").slice(-1)[0];
    $(this).parent().next("span").html(fileName);
  })
});

2. JS bez jQuery

Array.prototype.forEach.call(document.getElementsByTagName('input'), function(item) {
  item.addEventListener("change", function() {
    var fileName = '';
    fileName = this.value.split("\\").slice(-1)[0];
    this.parentNode.nextElementSibling.innerHTML = fileName;
  });
});
ChrisRob
źródło
3

Oto rozwiązanie, które pokazuje również wybraną nazwę pliku: http://jsfiddle.net/raft9pg0/1/

HTML:

<label for="file-upload" class="custom-file-upload">Chose file</label>
<input id="file-upload" type="file"/>
File: <span id="file-upload-value">-</span>

JS:

$(function() {
    $("input:file[id=file-upload]").change(function() {
        $("#file-upload-value").html( $(this).val() );
    });
});

CSS:

input[type="file"] {
    display: none;
}

.custom-file-upload {
      background: #ddd;
      border: 1px solid #aaa;
      border-top: 1px solid #ccc;
      border-left: 1px solid #ccc;
      -moz-border-radius: 3px;
      -webkit-border-radius: 3px;
      border-radius: 3px;
      color: #444;
      display: inline-block;
      font-size: 11px;
      font-weight: bold;
      text-decoration: none;
      text-shadow: 0 1px rgba(255, 255, 255, .75);
      cursor: pointer;
      margin-bottom: 20px;
      line-height: normal;
      padding: 8px 10px; }
Caleb
źródło
Jak wyświetlić tylko nazwę pliku, a nie fakepathścieżkę?
Hassan Baig
3

W tym tygodniu musiałem również dostosować przycisk i wyświetlić na bok wybraną nazwę pliku, więc po przeczytaniu niektórych odpowiedzi powyżej (Dzięki BTW) wpadłem na następującą implementację:

HTML:

<div class="browse">
<label id="uploadBtn" class="custom-file-upload">Choose file
<input type="file" name="fileInput" id="fileInput" accept=".yaml" ngf-select ngf-change="onFileSelect($files)" />
</label>
<span>{{fileName}}</span>
</div>

CSS

   input[type='file'] {
    color: #a1bbd5;
    display: none;

}

.custom-file-upload {
    border: 1px solid #a1bbd5;
    display: inline-block;
    padding: 2px 8px;
    cursor: pointer;
}

label{
    color: #a1bbd5;
    border-radius: 3px;
}

JavaScript (kątowy)

app.controller('MainCtrl', function($scope) {

        $scope.fileName = 'No file chosen';

          $scope.onFileSelect = function ($files) {
          $scope.selectedFile = $files;
          $scope.fileName = $files[0].name;
    };
});

Zasadniczo pracuję z biblioteką do przesyłania plików ng, pod kątem kątowym wiążę nazwę pliku z moim $ scope i nadając mu początkową wartość „Nie wybrano pliku”, wiążę również funkcję onFileSelect () z mój zakres, więc kiedy plik zostanie wybrany, otrzymuję nazwę pliku za pomocą interfejsu API ng-upload i przypisuję ją do $ scope.filename.

liron_hazan
źródło
3

Po prostu symuluj kliknięcie <input>, używając trigger()funkcji po kliknięciu stylu <div>. Utworzyłem własny przycisk z, <div>a następnie uruchomiłem kliknięcie inputpo kliknięciu mojego <div>. Umożliwia to utworzenie przycisku w dowolny sposób, ponieważ jest to <div>i symuluje kliknięcie pliku <input>. Następnie użyj display: nonena swoim <input>.

// div styled as my load file button
<div id="simClick">Load from backup</div>

<input type="file" id="readFile" />

// Click function for input
$("#readFile").click(function() {
    readFile();
});

// Simulate click on the input when clicking div
$("#simClick").click(function() {
    $("#readFile").trigger("click");
});
James Marquez
źródło
3

Najlepszym sposobem jest użycie pseudoelementu: za lub: przed, jako element nad wejściem de. Następnie styl ten pseudo element, jak chcesz. Zalecam wykonanie ogólnego stylu dla wszystkich plików wejściowych w następujący sposób:

input {
  height: 0px;
  outline: none;
}

input[type="file"]:before {
  content: "Browse";
  background: #fff;
  width: 100%;
  height: 35px;
  display: block;
  text-align: left;
  position: relative;
  margin: 0;
  margin: 0 5px;
  left: -6px;
  border: 1px solid #e0e0e0;
  top: -1px;
  line-height: 35px;
  color: #b6b6b6;
  padding-left: 5px;
  display: block;
}
Despertaweb
źródło
3

Najlepszym sposobem, jaki znalazłem, jest input type: fileustawienie go na display: none. Daj toid . Utwórz przycisk lub inny element, który chcesz otworzyć wejście pliku.

Następnie dodaj do niego detektor zdarzeń (przycisk), który po kliknięciu symuluje kliknięcie oryginalnego pliku wejściowego. Jak kliknięcie przycisku o nazwie hello, ale otwiera okno pliku.

Przykładowy kod

//i am using semantic ui

<button class="ui circular icon button purple send-button" id="send-btn">
      <i class="paper plane icon"></i>
    </button>
  <input type="file" id="file" class="input-file" />

javascript

var attachButton=document.querySelector('.attach-button');
    attachButton.addEventListener('click', e=>{
        $('#file').trigger("click")
    })
Taio
źródło
2

css może tutaj wiele zrobić ... z odrobiną oszustwa ...

<div id='wrapper'>
  <input type='file' id='browse'>
</div>

#wrapper {
     width: 93px; /*play with this value */
     height: 28px; /*play with this value */
     background: url('browseBtn.png') 0 0 no-repeat;
     border:none;
     overflow:hidden;
}

#browse{
     margin-left:-145px; /*play with this value */
     opacity:0; /* set to .5 or something so you can better position it as an overlay then back to zero again after you're done */
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
     filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
}

:: odniesienie :: http://site-o-matic.net/?viewpost=19

-opactwo

Opactwo
źródło
2

Znalazłem bardzo łatwą metodę zmiany przycisku pliku na zdjęcie. Po prostu oznacz zdjęcie i umieść je na przycisku pliku.

<html>
<div id="File button">
    <div style="position:absolute;">
        <!--This is your labeled image-->
        <label for="fileButton"><img src="ImageURL"></label>
    </div>
    <div>
        <input type="file" id="fileButton"/>
    </div>
</div>
</html>

Klikając oznaczony obraz, wybierasz przycisk pliku.

D-Inventor
źródło
2

Tylko takie podejście zapewnia pełną elastyczność! ES6 / VanillaJS!

HTML:

<input type="file" style="display:none;"></input>
<button>Upload file</button>

javascript:

document.querySelector('button').addEventListener('click', () => {
  document.querySelector('input[type="file"]').click();
});

Ukrywa to przycisk pliku wejściowego, ale pod maską klika go inny zwykły przycisk, który można oczywiście stylizować jak każdy inny przycisk. Jest to jedyne rozwiązanie bez wad oprócz bezużytecznego węzła DOM. Dzięki temu display:none;przycisk wejścia nie rezerwuje żadnej widocznej przestrzeni w DOM.

(Nie wiem już, komu dać za to rekwizyty. Ale wpadłem na ten pomysł gdzieś tutaj na Stackoverflow.)

codepleb
źródło