Czy można zmienić wygląd <input type="file">
?
html
css
file-upload
input
Newbie Coder
źródło
źródło
Odpowiedzi:
Nie możesz wiele zmienić w
input[type=file]
samej kontrolce.Ponieważ kliknięcie
label
elementu poprawnie sparowanego z wejściem spowoduje aktywację / skupienie go, możemy użyć a,label
aby wywołać okno dialogowe przeglądania systemu operacyjnego.Oto, jak możesz to zrobić…
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ć
change
zdarzenia 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.
źródło
#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; }
<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 .Może coś takiego?
źródło
display: none
usunie 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 .Dlaczego nie? ^ _ ^
Zobacz przykład tutaj
źródło
<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 .Jeśli używasz bootstrap, tutaj jest lepsze rozwiązanie:
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
źródło
Najprostszy sposób..
źródło
W zestawie internetowym możesz to wypróbować ...
źródło
przede wszystkim jest to kontener:
Po drugie, to styl CSS, jeśli chcesz naprawdę bardziej dostosować, wystarczy mieć otwarte oczy :)
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
źródło
right: 0
, zamiast tegoleft: 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-size
jest znacznie lepszym pomysłem niż użyciewidth
iheight
.Sztuczka polega na ukryciu danych wejściowych i dostosowaniu etykiety.
HTML:
CSS:
JS:
Możesz sprawdzić ten przykład: https://jsfiddle.net/rjurado/hnf0zhy1/4/
źródło
O wiele lepiej, jeśli po prostu użyjesz
<label>
, ukryjesz<input>
i dostosujesz etykietę.HTML:
CSS:
źródło
display: none
usunie 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 .aby pokazać ścieżkę do wybranego pliku, możesz spróbować tego na html:
i w javascript:
i styl:
źródło
Przykład Bootstrap
źródło
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:
HTML:
źródło
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ą.
źródło
position: absolute; right: 0; font-size: <many>px;
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:
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!
źródło
<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 .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ęść.
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.
źródło
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ę :)
źródło
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.
źródło
Oto jeden ze sposobów, który niedawno odkryłem, z odrobiną jQuery
Kod HTML:
W przypadku części javascript / jQuery:
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
źródło
display: none
usunie 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 .