Użyj Bootstrap FileStyle , który służy do stylizowania pól plików formularzy. Jest to wtyczka do biblioteki komponentów opartej na jQuery o nazwie Twitter Bootstrap
Wydaje się, że nie działa dla mnie. Nadal pokazuje domyślne przyciski przeglądarki. Demo na github.com/markusslima/bootstrap-filestyle.git też nie działa - wszystkie przykłady pokazują domyślne przyciski. Czy coś brakuje?
.
7
@ Tony Uhh .... co sprawia, że uważasz, że Bootstrap nie używa również „wacky <img /> hack” pod spodem? :-)
Andz
@ Czy możesz powiedzieć, która wersja przeglądarki i jej wersja? Przetestowane teraz na Chrome w wersji 43.0.2357.130 (64-bit) na Linuksie i wszystkie przykłady działają idealnie.
Fernando Kosh,
20
Rzucanie biblioteki javascript (z wtyczką!) Na tak mały problem to nieelegancki przesada.
MKaama,
3
Doceniony. To nawet nie jest odpowiedź, tylko obejście wymagające dodatkowej biblioteki. Odpowiedź powinna zmierzać do zmiany sposobu renderowania w przeglądarkach.
wdetac
108
Możesz zamiast tego umieścić obraz i zrobić to w następujący sposób:
CAVEAT : W IE9 i IE10, jeśli uruchomisz onClick w pliku wejściowym za pomocą javascript, formularz zostanie oznaczony jako „niebezpieczny” i nie może zostać przesłany za pomocą javascript, nie jestem pewien, czy można go przesłać tradycyjnie.
To sprytne rozwiązanie. Czy nie możesz tego zrobić również za pomocą elementu <button>?
Code Commander
1
@Code Commander - Dzięki, i tak, możesz to zrobić z każdym elementem, który chcesz, ale najczęściej jest to element <image>. Wystarczy pozbyć się przycisku + pola tekstowego „wprowadzania pliku” ...
ParPar
2
Tylko niektóre osoby, które korzystają z powyższego rozwiązania, niektóre przeglądarki mobilne wyłączają programowo uruchamianie kliknięć pliku. W szczególności Android 4 dla Galaxy S III
newshorts
Używam <input type="file" wewnątrz wiersza widoku siatki asp.net, którego wiersze można dodawać dynamicznie .. więc prawdziwym bólem w głowie będzie wywołanie odpowiedniego wyzwalacza kliknięcia wejściowego (tego samego rzędu) podczas klikania obrazu! : /
sohaiby
twoje rozwiązanie nie działa. Nie ustawiłeś granicy, marginesu, wypełnienia i koloru tła, bo inaczej byłoby to oczywiste
yan bellavance
88
Ukryj wejście pliku. Utwórz nowe dane wejściowe, aby zarejestrować zdarzenie kliknięcia i przesłać je do ukrytego wejścia:
wrzucając plik HTA w trybie ie7 musiałem usunąć ;na końcu.
ATek
świetnie, nie chcę uwzględniać bootstrapu tylko po to, żeby zmienić dwa słowa tekstu, ale jak byś to zrobił, gdyby dane wejściowe do pliku były tworzone dynamicznie?
asparizm
@asparism używać JavaScript do manipulowania DOM, ukryć go, ustawiając jego styl i użyć przed () i dodać nowy element wejściowy?
MushyPeas,
3
@MushyPeas to najprostszy sposób. próbowałem grać z css, ale to rozwiązanie jest znacznie szybsze i łatwiejsze. dzięki
Mara
2
To też był dla mnie najłatwiejszy sposób! Pozwoliło mi to również STYLOWAĆ „próbny” przycisk pliku jako jedną z innych opcji przycisku formularza - bez obawy o wyświetlanie dziwnie wyglądającego przycisku „Przeglądaj”.
Harry Mantheakis,
47
Tekst „prześlij plik ...” jest wstępnie zdefiniowany w przeglądarce i nie można go zmienić. Jedynym sposobem na obejście tego jest użycie komponentu wysyłającego opartego na Flashu lub Javie, takiego jak swfupload .
Lub przeglądając kody źródłowe przeglądarek, przynajmniej te otwarte.
Pekka
Może to wynikać z odpowiedzi (na inne pytanie, na przykład „Dlaczego wartość ma wartość” „VALUE =„ C: \ someFile.txt ”” dla pola wejściowego pliku typu „TYPE =„ FILE ””, ignorowane przez przeglądarka? ”): stackoverflow.com/questions/1342039
Peter Mortensen
23
Pracuje idealnie na wszystkich przeglądarkach Mam nadzieję, że to też zadziała.
Działa idealnie na moim końcu na moim FF 41.0.2. Pracujesz, aby rozwiązać problem ze zgodnością z różnymi przeglądarkami, zapoznaj się z MODELEM BOX CSS, aby zminimalizować problem.
Code Black,
1
Problemem jest prawdopodobnie to, że FF jest zbudowany na Gecko, a nie na webkicie. (moje najlepsze przypuszczenie)
Cullub,
2
<label id = "addButton" for = "Upload" style = "kolor tła: # 000; kolor: #fff; wypełnienie: 4px; promień obramowania: 4px; rodzina czcionek: monospace;" > Wybierz jakiś plik </label> <input id = "upload" type = "file" multiple = "multiple" name = "_ photos" accept = "image / *" style = "visibility: hidden">
Code Black
4
Ok dzięki! Sprawdź to JSFiddle . Jeśli edytujesz w ten sposób swoją odpowiedź, myślę, że warto ją pochwalić :)
Cullub,
10
To jest wtyczka JQuery do zmiany tekstu przycisku elementu pliku wejściowego.
<labelclass="btn btn-primary"><iclass="fa fa-image"></i> Your text here<inputtype="file"style="display: none;"name="image"></label>
[Edytuj za pomocą fragmentu]
<linkhref="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"rel="stylesheet"/><linkhref="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"rel="stylesheet"/><labelclass="btn btn-primary"><iclass="fa fa-image"></i> Your text here<inputtype="file"style="display: none;"name="image"></label>
<buttonstyle="display:block;width:120px;height:30px;"onclick="document.getElementById('getFile').click()">Your text here</button><inputtype='file'id="getFile"style="display:none">
EDYCJA : Widzę teraz w komentarzach, że pytasz o tekst przycisku, a nie ścieżkę do pliku. Mój błąd. Zostawię swoją oryginalną odpowiedź poniżej na wypadek, gdyby ktoś, kto natknie się na to pytanie, zinterpretuje to tak, jak ja pierwotnie.
2. EDYCJA : Usunąłem tę odpowiedź, ponieważ zdecydowałem, że źle zrozumiałem pytanie, a moja odpowiedź nie była istotna. Jednak komentarze w innej odpowiedzi wskazywały, że ludzie nadal chcieli zobaczyć tę odpowiedź, więc ją cofam.
MOJA ORYGINALNA ODPOWIEDŹ (Myślałem, że OP pyta o ścieżkę, a nie tekst przycisku):
To nie jest obsługiwana funkcja ze względów bezpieczeństwa . Przeglądarka internetowa Opera używała tego, ale została usunięta. Zastanów się, co byłoby możliwe, gdyby było to obsługiwane; Możesz utworzyć stronę z danymi wejściowymi do przesłania pliku, wstępnie wypełnić ją ścieżką do poufnego pliku, a następnie automatycznie przesłać formularz za pomocą javascript wyzwalanego przez onloadzdarzenie. Stałoby się to zbyt szybko, aby użytkownik mógł cokolwiek z tym zrobić.
<formenctype='multipart/form-data'action='/uploads.php'method=post><labelfor=b1><u>Your</u> caption here
<inputstyle='width:0px'type=filename=upfileid=b1onchange='optionalExtraProcessing(b1.files[0])'accept='image/png'></label></form>
Działa to bez żadnego javascript . Możesz ozdobić etykietę o dowolnym stopniu złożoności, według własnego serca. Po kliknięciu etykiety kliknięcie zostanie automatycznie przekierowane do pliku wejściowego. Sam plik wejściowy może być niewidoczny za pomocą dowolnej metody. Jeśli chcesz, aby etykieta wyglądała jak przycisk, istnieje wiele rozwiązań, np .:
Możesz po prostu dodać sztuczkę css. Państwo nie trzeba javascript lub więcej plików wejściowych i zachować istniejący atrybut wartość . musisz dodać tylko css . możesz wypróbować to rozwiązanie.
dla mnie nie działa niestandardowy tekst z bootstrap-filestyle . Pomaga w ozdabianiu guzików, ale tekst jest dziwny do zmiany, zanim zacznę zapasy z css, spróbuję:
bootstrap-filestyle renderuje komponent jako rozpiętość za pomocą klasy o nazwie butonText, więc po załadowaniu dokumentu wystarczy zmienić tekst. łatwe w prawo i musi działać na wszystkich przeglądarkach.
Jest to alternatywne rozwiązanie, które może ci pomóc. Ukrywa to tekst, który pojawia się poza przyciskiem, mieszając go z kolorem tła div. Następnie możesz nadać divowi tytuł, który ci się spodoba.
W przeglądarce Chrome 39 widzę zarówno tekst WYŚLIJ OBRAZ, jak i przycisk <wejście>. Być może obsługa danych wejściowych plików w Chrome zmieniła się od czasu, gdy to opublikowałeś?
EricP
@ yan-bellavance co robisz? Jeśli uważasz, że odpowiedź jest niepoprawna lub nie jest pomocna, zgłoś ją, ale w żaden sposób nie zniechęcaj!
Odpowiedzi:
Użyj Bootstrap FileStyle , który służy do stylizowania pól plików formularzy. Jest to wtyczka do biblioteki komponentów opartej na jQuery o nazwie Twitter Bootstrap
Przykładowe użycie:
Zawierać:
Przez JavaScript:
Poprzez atrybuty danych:
źródło
Możesz zamiast tego umieścić obraz i zrobić to w następujący sposób:
HTML:
JQuery:
CAVEAT : W IE9 i IE10, jeśli uruchomisz onClick w pliku wejściowym za pomocą javascript, formularz zostanie oznaczony jako „niebezpieczny” i nie może zostać przesłany za pomocą javascript, nie jestem pewien, czy można go przesłać tradycyjnie.
źródło
<input type="file"
wewnątrz wiersza widoku siatki asp.net, którego wiersze można dodawać dynamicznie .. więc prawdziwym bólem w głowie będzie wywołanie odpowiedniego wyzwalacza kliknięcia wejściowego (tego samego rzędu) podczas klikania obrazu! : /Ukryj wejście pliku. Utwórz nowe dane wejściowe, aby zarejestrować zdarzenie kliknięcia i przesłać je do ukrytego wejścia:
źródło
;
na końcu.Tekst „prześlij plik ...” jest wstępnie zdefiniowany w przeglądarce i nie można go zmienić. Jedynym sposobem na obejście tego jest użycie komponentu wysyłającego opartego na Flashu lub Javie, takiego jak swfupload .
źródło
Pracuje idealnie na wszystkich przeglądarkach Mam nadzieję, że to też zadziała.
HTML:
<input type="file" class="custom-file-input">
CSS:
Zmiana
content: 'Select some files';
z tekstem, który chcesz w sobie''
JEŚLI NIE DZIAŁA Z firefox, użyj tego zamiast danych wejściowych:
źródło
To jest wtyczka JQuery do zmiany tekstu przycisku elementu pliku wejściowego.
Przykładowy HTML:
Przykład JS:
Wynik:
źródło
JS
więcej http://geniuscarrier.com/how-to-style-a-html-file-upload-button-in-pure-css/
źródło
Po prostu
[Edytuj za pomocą fragmentu]
źródło
Myślę, że tego właśnie chcesz:
źródło
EDYCJA : Widzę teraz w komentarzach, że pytasz o tekst przycisku, a nie ścieżkę do pliku. Mój błąd. Zostawię swoją oryginalną odpowiedź poniżej na wypadek, gdyby ktoś, kto natknie się na to pytanie, zinterpretuje to tak, jak ja pierwotnie.
2. EDYCJA : Usunąłem tę odpowiedź, ponieważ zdecydowałem, że źle zrozumiałem pytanie, a moja odpowiedź nie była istotna. Jednak komentarze w innej odpowiedzi wskazywały, że ludzie nadal chcieli zobaczyć tę odpowiedź, więc ją cofam.
MOJA ORYGINALNA ODPOWIEDŹ (Myślałem, że OP pyta o ścieżkę, a nie tekst przycisku):
To nie jest obsługiwana funkcja ze względów bezpieczeństwa . Przeglądarka internetowa Opera używała tego, ale została usunięta. Zastanów się, co byłoby możliwe, gdyby było to obsługiwane; Możesz utworzyć stronę z danymi wejściowymi do przesłania pliku, wstępnie wypełnić ją ścieżką do poufnego pliku, a następnie automatycznie przesłać formularz za pomocą javascript wyzwalanego przez
onload
zdarzenie. Stałoby się to zbyt szybko, aby użytkownik mógł cokolwiek z tym zrobić.źródło
Użyj
<label>
do podpisuDziała to bez żadnego javascript . Możesz ozdobić etykietę o dowolnym stopniu złożoności, według własnego serca. Po kliknięciu etykiety kliknięcie zostanie automatycznie przekierowane do pliku wejściowego. Sam plik wejściowy może być niewidoczny za pomocą dowolnej metody. Jeśli chcesz, aby etykieta wyglądała jak przycisk, istnieje wiele rozwiązań, np .:
źródło
Tylko klasa CSS i bootstrap
źródło
<input type="file">
dodaj obraz<input style="position:absolute">
, który zajmie miejsce<input type="file">
Użyj następującego CSS do elementu pliku
źródło
jeśli używasz szyn i masz problem ze stosowaniem go, chciałbym dodać kilka wskazówek z oryginalnej odpowiedzi opublikowanej przez @Fernando Kosh
otwórz plik application.js i dodaj ten wiersz poniżej
// = wymaga bootstrap-filestyle.min
otwórz swoją kawę i dodaj tę linię
$ („: plik”). filestyle ({buttonName: „btn-primary”, buttonBefore: true, buttonText: „Twój tekst tutaj”, ikona: fałsz});
źródło
Możesz po prostu dodać sztuczkę css. Państwo nie trzeba javascript lub więcej plików wejściowych i zachować istniejący atrybut wartość . musisz dodać tylko css . możesz wypróbować to rozwiązanie.
źródło
Oto sposób na „zmianę” tekstu danych wejściowych o typie pliku, czystym HTML i javascript:
źródło
dla mnie nie działa niestandardowy tekst z bootstrap-filestyle . Pomaga w ozdabianiu guzików, ale tekst jest dziwny do zmiany, zanim zacznę zapasy z css, spróbuję:
bootstrap-filestyle renderuje komponent jako rozpiętość za pomocą klasy o nazwie butonText, więc po załadowaniu dokumentu wystarczy zmienić tekst. łatwe w prawo i musi działać na wszystkich przeglądarkach.
Twoje zdrowie
źródło
Zrobiłem to tak dla mojego projektu:
źródło
Jest to alternatywne rozwiązanie, które może ci pomóc. Ukrywa to tekst, który pojawia się poza przyciskiem, mieszając go z kolorem tła div. Następnie możesz nadać divowi tytuł, który ci się spodoba.
źródło