Czy istnieje sposób na stylizację (lub skrypt) <input type=file />
elementu tak, aby był widoczny tylko przycisk „Przeglądaj” bez pola tekstowego?
Dzięki
Edycja : tylko po to, aby wyjaśnić, dlaczego tego potrzebuję. Używam kodu przesyłania wielu plików z http://www.morningz.com/?p=5 i nie potrzebuje on pola tekstowego, ponieważ nigdy nie ma wartości. Skrypt po prostu dodaje nowo wybrany plik do kolekcji na stronie. Gdyby było to możliwe, wyglądałoby znacznie lepiej bez pola tekstowego.
javascript
html
css
Andrija
źródło
źródło
Miałem cholernie dużo czasu, próbując to osiągnąć. Nie chciałem używać rozwiązania Flash, a żadna z bibliotek jQuery, które oglądałem, nie była niezawodna we wszystkich przeglądarkach.
Wymyśliłem własne rozwiązanie, które jest zaimplementowane w całości w CSS (z wyjątkiem zmiany stylu onclick, która powoduje, że przycisk wygląda na „kliknięty”).
Możesz wypróbować działający przykład tutaj: http://jsfiddle.net/VQJ9V/307/ (testowane w FF 7, IE 9, Safari 5, Opera 11 i Chrome 14)
Działa poprzez utworzenie dużego pliku wejściowego (z rozmiarem czcionki: 50px), a następnie zawijanie go w element div o stałym rozmiarze i przepełnieniu: ukryty. Dane wejściowe są wtedy widoczne tylko przez ten element div „window”. Elementowi DIV można nadać obraz lub kolor tła, można dodać tekst, a dane wejściowe można uczynić przezroczystymi, aby odsłonić tło elementu DIV:
HTML:
CSS:
Daj mi znać, jeśli są z tym jakieś problemy, a postaram się je naprawić.
źródło
Zmarnowałem dziś dzień, żeby to zadziałało. Nie znalazłem tutaj żadnego rozwiązania działającego w każdym z moich scenariuszy.
Wtedy przypomniałem sobie, że widziałem przykład przesyłania plików JQuery bez pola tekstowego. Więc to, co zrobiłem, to wziąłem ich przykład i zredukowałem go do odpowiedniej części.
To rozwiązanie działa przynajmniej dla IE i FF i może być w pełni stylizowane. W poniższym przykładzie plik wejściowy jest ukryty pod fantazyjnym przyciskiem „Dodaj pliki”.
źródło
Ukryj element pliku wejściowego i utwórz widoczny przycisk, który wyzwoli zdarzenie kliknięcia tego pliku wejściowego.
Spróbuj tego:
CSS
HTML:
JAVASCRIPT (jQuery):
źródło
Ukryj znacznik pliku wejściowego za pomocą css, dodaj etykietę i przypisz ją do przycisku wejściowego. będzie można kliknąć, a po kliknięciu otworzy okno dialogowe pliku.
Dodaj styl do etykiety jako przycisk.
Live Demo
źródło
onchange
procedurę obsługi doinput
pliku, aby umożliwić kodowi JS pobranie informacji o przesłanym pliku.To będzie bardzo trudne. Problem z typem wejściowym pliku polega na tym, że zwykle składa się on z dwóch elementów wizualnych, a jednocześnie jest traktowany jako pojedynczy element DOM. Dodaj do tego to, że kilka przeglądarek ma własny, odrębny wygląd i sposób działania podczas wprowadzania pliku, a jesteś gotowy na koszmar. Zobacz ten artykuł na quirksmode.org o dziwactwach, jakie ma wejście do pliku. Gwarantuję, że nie sprawi ci to radości (mówię z doświadczenia).
[EDYTOWAĆ]
Właściwie myślę, że możesz uciec, umieszczając dane wejściowe w elemencie kontenera (takim jak div) i dodając ujemny margines do elementu. Skutecznie ukrywa część pola tekstowego poza ekranem. Inną opcją byłoby użycie techniki z artykułu, do którego utworzyłem łącze, aby spróbować stylizować go na przycisk.
źródło
Poprawka do pracy we wszystkich przeglądarkach ROZWIĄZANE:
Testowałem w FF, Chrome i IE - działa dobrze, stosowane style też: D
źródło
Próbowałem wdrożyć dwa najlepsze rozwiązania i okazało się to dla mnie OGROMNĄ stratą czasu. W końcu zastosowanie tej klasy .css rozwiązało problem ...
Gotowe! super czysty i super prosty ...
źródło
Kolejny łatwy sposób na zrobienie tego. Utwórz tag „plik typu wejściowego” w html i ukryj go. Następnie kliknij przycisk i sformatuj go zgodnie z potrzebami. Następnie użyj javascript / jquery, aby programowo kliknąć znacznik wejściowy po kliknięciu przycisku.
HTML: -
JavaScript: -
jQuery: -
CSS: -
Oto działające skrzypce JS do tego samego: - http://jsfiddle.net/32na3/
źródło
Użyłem części kodu zalecanego powyżej i po wielu godzinach marnowania czasu w końcu doszedłem do rozwiązania bez torby CSS.
Możesz go uruchomić tutaj - http://jsfiddle.net/WqGph/
ale potem znalazłem lepsze rozwiązanie - http://jsfiddle.net/XMMc4/5/
źródło
onchange
zdarzenie nie jest wyzwalane dla ukrytegoinput
elementu.Oto moje stare dobre lekarstwo:
Przynajmniej działało w Safari.
Jasne i proste.
źródło
Możesz oznaczyć obraz tak, aby po jego kliknięciu wywoływane było zdarzenie kliknięcia przycisku. Możesz po prostu uczynić zwykły przycisk niewidocznym:
Działa dla mnie we wszystkich przeglądarkach i jest bardzo łatwy w użyciu.
źródło
Możesz wywołać zdarzenie kliknięcia na ukrytym pliku wejściowym w następujący sposób:
źródło
var ev = document.createEvent('HTMLEvents');
zmień HTMLEvents na MouseEventsvar ev = document.createEvent('MouseEvents');
HTML:
JQUERY
Mam nadzieję, że to zadziała :)
źródło
Możesz nadać elementowi wejściowemu nieprzezroczystość czcionki równą 0. Spowoduje to ukrycie pola tekstowego bez ukrywania przycisku „Wybierz pliki”.
Nie wymaga javascript, przejrzysta przeglądarka internetowa już w IE 9
Na przykład,
źródło
Mam naprawdę zepsute rozwiązanie z tym ...
Problem polega na tym, że atrybut szerokości, który ukrywa pole tekstowe, oczywiście różni się w zależności od przeglądarki, różni się w zależności od motywów systemu Windows XP i tak dalej. Może to jednak coś, z czym możesz pracować? ...
źródło
Wiem, że to stary post, ale prostym sposobem na zniknięcie tekstu jest ustawienie koloru tekstu na kolor tła.
np. jeśli tło wprowadzania tekstu jest białe, to:
Nie wpłynie to na tekst Wybierz plik, który z powodu przeglądarki nadal będzie czarny.
źródło
To działa dla mnie:
źródło
moim rozwiązaniem jest po prostu ustawienie go w elemencie div, tak jak powiedział "druveen", jednak dodam własny styl przycisku do elementu div (nadaj mu wygląd przycisku z: hover) i ustawiam styl "krycie: 0;" do wejścia. Dla mnie działa jak urok, mam nadzieję, że zrobi to samo dla ciebie.
źródło
Po prostu nadałem plikowi wejściowemu styl o szerokości: 85 pikseli, a pole tekstowe w ogóle zniknęło
źródło
Ten kod HTML pokazuje tylko przycisk Prześlij plik
źródło
źródło
Dla mnie najprostszym sposobem jest użycie koloru czcionki, takiego jak kolor tła. Proste, nie eleganckie, ale przydatne.
źródło
Oto najlepszy sposób, aby to zrobić DLA WSZYSTKICH PRZEGLĄDAREK:
Zapomnij o CSS!
źródło
Wszystkie te odpowiedzi są urocze, ale CSS nie będzie działać, ponieważ nie jest taki sam we wszystkich przeglądarkach i urządzeniach, pierwsza odpowiedź, którą napisałem, będzie działać we wszystkim oprócz Safari. Aby działał we wszystkich przeglądarkach przez cały czas, musi być tworzony dynamicznie i odtwarzany za każdym razem, gdy chcesz wyczyścić tekst wejściowy:
źródło
Odpowiedź tmanthey jest całkiem dobra, z wyjątkiem tego, że nie można grać z border-width w Firefoksie v20. Jeśli widzisz link (demo, tak naprawdę nie można go tu pokazać), rozwiązali problem, używając font-size = 23px, transform: translate (-300px, 0px) scale (4) dla Firefoksa, aby powiększyć przycisk.
Inne rozwiązania wykorzystujące .click () na innym elemencie div są bezużyteczne, jeśli chcesz, aby było to pole wprowadzania danych metodą drag'n'drop.
źródło
Jest tutaj kilka ważnych opcji, ale pomyślałem, że podam to, co wymyśliłem, próbując rozwiązać podobny problem. http://jsfiddle.net/5RyrG/1/
źródło
Rozwiązano za pomocą następującego kodu:
<div style="overflow: hidden;width:83px;"> <input style='float:right;' name="userfile" id="userfile" type="file"/> </div>
źródło
Ja to napisałem:
Działa dobrze we wszystkich przeglądarkach, bez jQuery, bez CSS.
źródło
Oto uproszczona wersja popularnego rozwiązania @ ampersandre, które działa we wszystkich głównych przeglądarkach. Znaczniki Asp.NET
Kod JQuery
kod css
Używa ukrytego wyzwalacza kliknięcia „UploadButton” do ogłaszania zwrotnego serwera ze standardem. Tekst z tekstem „Prześlij plik” wypycha element sterujący wejścia poza widok w opakowującym elemencie div, gdy przepełnia, więc nie ma potrzeby stosowania żadnych stylów dla elementu sterującego „wejście pliku”. Selektor $ ([id $ = "FileInput"]) umożliwia sekcję identyfikatorów z zastosowanymi standardowymi prefiksami ASP.NET. Wartość pola tekstowego FilePath jest ustawiana na podstawie kodu serwera z hdnFileName.Value po przesłaniu pliku.
źródło