Podobnie jak wiele osób chciałbym dostosować brzydki input type=file
i wiem, że nie da się tego zrobić bez kilku hacków i / lub javascript
. Ale chodzi o to, że w moim przypadku przyciski przesyłania plików służą tylko do przesyłania obrazów ( jpeg | jpg | png | gif ), więc zastanawiałem się, czy mogę użyć clickable
obrazu, który działałby dokładnie jako plik typu wejściowego ( pokaż okno dialogowe i ten sam plik $ _FILE na przesłanej stronie).
Znalazłem tutaj obejście i to interesujące (ale nie działa w Chrome = /).
Co robicie, kiedy chcecie nadać styl przyciskom plików? Jeśli masz na ten temat jakiś punkt widzenia, po prostu naciśnij przycisk odpowiedzi;)
Odpowiedzi:
U mnie to działa naprawdę dobrze:
.image-upload>input { display: none; }
<div class="image-upload"> <label for="file-input"> <img src="https://icon-library.net/images/upload-photo-icon/upload-photo-icon-21.jpg"/> </label> <input id="file-input" type="file" /> </div>
Zasadniczo atrybut for etykiety sprawia, że kliknięcie etykiety jest takie samo jak kliknięcie określonego wejścia .
Ponadto właściwość display ustawiona na none sprawia, że dane wejściowe pliku nie są w ogóle renderowane, ukrywając je ładnie i czysto.
Testowany w Chrome, ale według sieci powinien działać na wszystkich głównych przeglądarkach. :)
EDYCJA: Dodano JSFiddle tutaj: https://jsfiddle.net/c5s42vdz/
źródło
Właściwie można to zrobić w czystym CSS i jest to całkiem proste ...
Kod HTML
<label class="filebutton"> Browse For File! <span><input type="file" id="myfile" name="myfile"></span> </label>
Style CSS
label.filebutton { width:120px; height:40px; overflow:hidden; position:relative; background-color:#ccc; } label span input { z-index: 999; line-height: 0; font-size: 50px; position: absolute; top: -2px; left: -700px; opacity: 0; filter: alpha(opacity = 0); -ms-filter: "alpha(opacity=0)"; cursor: pointer; _cursor: hand; margin: 0; padding:0; }
Chodzi o to, aby umieścić wejście absolutnie wewnątrz etykiety. ustaw rozmiar czcionki wejścia na coś dużego, co zwiększy rozmiar przycisku „przeglądaj”. Następnie potrzeba trochę prób i błędów, używając właściwości ujemnych left / top, aby ustawić przycisk przeglądania wejścia za etykietą.
Ustawiając przycisk, ustaw alfa na 1. Kiedy skończysz, ustaw go z powrotem na 0 (abyś mógł zobaczyć, co robisz!)
Upewnij się, że wykonujesz testy w różnych przeglądarkach, ponieważ wszystkie one renderują przycisk wprowadzania danych w nieco innym rozmiarze.
źródło
Świetne rozwiązanie dzięki @hardsetting, ale wprowadziłem kilka ulepszeń, aby działało z Safari (5.1.7) w systemie Windows
.image-upload > input { visibility:hidden; width:0; height:0 }
<div class="image-upload"> <label for="file-input"> <img src="https://placehold.it/100/000000/ffffff?text=UPLOAD" style="pointer-events: none"/> </label> <input id="file-input" type="file" /> </div>
Użyłem
visibility: hidden, width:0
zamiastdisplay: none
dla problemu z safari i dodałempointer-events: none
wimg
tagu, aby działał, jeśli tag typu pliku wejściowego jest w tagu FORM.Wydaje się, że działa dla mnie we wszystkich głównych przeglądarkach.
Mam nadzieję, że to komuś pomoże.
źródło
To jest moja metoda, jeśli rozumiem twój punkt widzenia
HTML
<label for="FileInput"> <img src="tools/img/upload2.png" style="cursor:pointer" onmouseover="this.src='tools/img/upload.png'" onmouseout="this.src='tools/img/upload2.png'" alt="Injaz Msila" style="float:right;margin:7px" /> </label> <form action="upload.php"> <input type="file" id="FileInput" style="cursor: pointer; display: none"/> <input type="submit" id="Up" style="display: none;" /> </form>
jQuery
<script type="text/javascript"> $( "#FileInput" ).change(function() { $( "#Up" ).click(); }); </script>
źródło
Użyłbym SWFUpload lub Uploadify . Potrzebują Flasha, ale robią wszystko, co chcesz, bez problemów.
Każde
<input type="file">
oparte na nim obejście, które próbuje wywołać okno dialogowe „otwórz plik” w inny sposób niż kliknięcie rzeczywistego elementu sterującego, może zostać w dowolnym momencie usunięte z przeglądarek ze względów bezpieczeństwa. (Myślę, że w obecnych wersjach FF i IE nie jest już możliwe programowe wywołanie tego zdarzenia).źródło
to naprawdę proste, możesz spróbować tego:
$("#image id").click(function(){ $("#input id").click(); });
źródło
Zamiast tego możesz umieścić obraz i zrobić to w następujący sposób:
HTML:
<img src="/images/uploadButton.png" id="upfile1" style="cursor:pointer" /> <input type="file" id="file1" name="file1" style="display:none" />
JQuery:
$("#upfile1").click(function () { $("#file1").trigger('click'); });
OSTRZEŻENIE : W IE9 i IE10, jeśli uruchomisz onclick w pliku wejściowym za pomocą javascript, formularz zostanie oznaczony jako „niebezpieczny” i nie będzie można go zastąpić javascriptem, nie jestem pewien, czy można go przesłać tradycyjnie.
źródło
Samo wejście jest ukryte z widocznością CSS: ukryte.
Następnie możesz mieć dowolny element, który chcesz - kotwicę lub obraz ..., po kliknięciu kotwicy / obrazu uruchom kliknięcie ukrytego pola wejściowego - pojawi się okno dialogowe wyboru pliku.
EDYCJA: Właściwie to działa w Chrome i Safari, właśnie zauważyłem, że tak nie jest w FF4Beta
źródło
Kod roboczy:
po prostu ukryj część wejściową i zrób w ten sposób.
<div class="ImageUpload"> <label for="FileInput"> <img src="../../img/Upload_Panel.png" style="width: 18px; margin-top: -316px; margin-left: 900px;"/> </label> <input id="FileInput" type="file" onchange="readURL(this,'Picture')" style="cursor: pointer; display: none"/> </div>
źródło
form input[type="file"] { display: none; }
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Simple File Upload</title> <meta name="" content=""> </head> <body> <form action="upload.php" method="post" enctype="multipart/form-data"> Select image to upload: <label for="fileToUpload"> <img src="http://s3.postimg.org/mjzvuzi5b/uploader_image.png" /> </label> <input type="File" name="fileToUpload" id="fileToUpload"> <input type="submit" value="Upload Image" name="submit"> </form> </body> </html>
RUN SNIPPET lub Po prostu skopiuj powyższy kod i wykonaj. Dostaniesz to, czego chciałeś. Bardzo proste i skuteczne bez javascript. Cieszyć się!!!
źródło
W ciągu ostatniej dekady miałem wiele problemów z ukrytymi i niewidocznymi danymi wejściowymi, czasami rzeczy są o wiele prostsze, niż nam się wydaje.
Miałem małe życzenie z IE 5, 6, 7, 8 i 9, aby nie obsługiwać krycia, a zatem dane wejściowe pliku obejmowałyby przesyłany obraz, jednak następujący kod CSS rozwiązał problem.
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0);
Poniższe wycięte fragmenty są testowane na Chrome, IE 5,6,7,8,9,10 Jedynym problemem w IE 5 jest to, że nie obsługuje automatycznego marginesu.
Uruchom fragment, po prostu skopiuj i wklej CSS i HTML, zmodyfikuj rozmiar, jak chcesz.
.file-upload{ height:100px; width:100px; margin:40px auto; border:1px solid #f0c0d0; border-radius:100px; overflow:hidden; position:relative; } .file-upload input{ position:absolute; height:400px; width:400px; left:-200px; top:-200px; background:transparent; opacity:0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } .file-upload img{ height:70px; width:70px; margin:15px; }
<div class="file-upload"> <!--place upload image/icon first !--> <img src="https://i.stack.imgur.com/dy62M.png" /> <!--place input file last !--> <input type="file" name="somename" /> </div>
źródło
O wiele lepszym sposobem niż pisanie JS jest użycie natywnego i okazuje się, że jest lżejszy niż sugerowano:
<label> <img src="my-image.png"> <input type="file" name="myfile" style="display:none"> </label>
W ten sposób
label
jest automatycznie podłączany do wejścia, które jest ukryte. Kliknięcie etykiety przypomina kliknięcie pola.źródło