Chciałbym <input type="file">
programowo wywołać zdarzenie kliknięcia tagu.
Samo wywołanie click () wydaje się nic nie robić, a przynajmniej nie wyświetla okna wyboru pliku.
Eksperymentowałem z przechwytywaniem zdarzeń za pomocą detektorów i przekierowywaniem zdarzenia, ale nie udało mi się tego zrobić, aby faktycznie wykonać zdarzenie tak, jakby ktoś go kliknął.
javascript
html
użytkownik 28655
źródło
źródło
Odpowiedzi:
Nie możesz tego zrobić we wszystkich przeglądarkach, podobno IE na to pozwala, ale Mozilla i Opera nie.
Gdy piszesz wiadomość w Gmailu, funkcja „dołącz pliki” jest implementowana w jeden sposób dla IE i dowolnej przeglądarki, która to obsługuje, a następnie wdrażana w inny sposób dla Firefoxa i przeglądarek, które tego nie robią.
Nie wiem, dlaczego nie możesz tego zrobić, ale jedną rzeczą, która jest zagrożeniem bezpieczeństwa i której nie możesz robić w żadnej przeglądarce, jest programowe ustawienie nazwy pliku w elemencie HTML File.
źródło
input
element pliku jest widoczny. Wywołanieclick
metody działa, także w konsoli, jeśli element jest widoczny.Przez cały dzień szukałem rozwiązania. Oto wnioski, które wyciągnąłem:
Mam nadzieję że to pomoże! :)
źródło
Możesz uruchomić click () w dowolnej przeglądarce, ale niektóre przeglądarki wymagają, aby element był widoczny i skoncentrowany. Oto przykład jQuery:
Działa z hide wcześniej,
click()
ale nie wiem, czy działa bez wywołania metody show. Nigdy nie próbowałem tego w Operze, testowałem na IE / FF / Safari / Chrome i działa. Mam nadzieję, że to pomoże.źródło
$(...).show().focus().click().hide();
:)TO JEST MOŻLIWE: pod FF4 +, Opera?, Chrome: ale:
inputElement.click()
należy wywoływać z kontekstu akcji użytkownika! (nie kontekst wykonania skryptu)<input type="file" />
powinien być widoczny (inputElement.style.display !== 'none'
) (możesz ukryć to z widocznością lub czymś innym, ale nie właściwością „display”)źródło
onclick
atrybutu zamiast wiązania z wydarzeniem.inputElement.click()
z poziomu zdarzenia keydown (skrót do załączenia pliku) działało, ale NIE wywoływało go przekroczenie limitu czasu lub wywołanie zwrotne ajax. Pozytywne.this
. : /Dla tych, którzy rozumieją, że musisz nałożyć link niewidoczny na link, ale są zbyt leniwi, by pisać, napisałem to dla ciebie. Cóż, dla mnie, ale równie dobrze mogę się podzielić. Komentarze są mile widziane.
HTML (gdzieś):
HTML (Gdzieś się nie przejmujesz):
JavaScript:
źródło
Wypróbuj to rozwiązanie: http://code.google.com/p/upload-at-click/
źródło
wystarczy użyć tagu etykiety, w ten sposób można ukryć dane wejściowe i sprawić, by działało poprzez powiązaną etykietę https://developer.mozilla.org/fr/docs/Web/HTML/Element/Label
źródło
Jeśli chcesz, aby ta
click
metoda działała w przeglądarce Chrome, Firefox itp., Zastosuj następujący styl do pliku wejściowego. Będzie idealnie ukryty, to tak jak tydisplay: none;
To takie proste, przetestowałem to działa!
źródło
height
iwidth
na0
?Pracował dla mnie, gdy napotkałem podobny problem, to zwykły eRube Goldberg.
źródło
Dodam do tego starego posta, działającego rozwiązania, z którego korzystałem, które działa w prawdopodobnie 80% lub więcej wszystkich przeglądarek zarówno nowych, jak i starych.
Rozwiązanie jest złożone, ale proste. Pierwszym krokiem jest skorzystanie z CSS i wybranie typu pliku wejściowego z „pod-elementami”, które pokazują się, ponieważ ma krycie równe 0. Kolejnym krokiem jest użycie JavaScript do aktualizacji etykiety w razie potrzeby.
Działający przykład jsFiddle
źródło
To działa :
Ze względów bezpieczeństwa w Firefoksie i Operze nie można uruchomić kliknięcia pliku wejściowego, ale można przeprowadzić symulację za pomocą MouseEvents:
źródło
createEvent()
iinitMouseEvent()
są teraz przestarzałe.Wiem, że to jest stare, a wszystkie te rozwiązania to hacki wokół środków bezpieczeństwa przeglądarki z prawdziwą wartością.
Powiedział, że na dzień dzisiejszy fileInput.click () działa w bieżącym Chrome (36.0.1985.125 m) i bieżącym Firefox ESR (24.7.0), ale nie w bieżącym IE (11.0.9600.17207). Nakładanie pola pliku z kryciem 0 na przycisk działa, ale chciałem elementu odsyłacza jako widocznego wyzwalacza, a podkreślenie najechania nie działa w żadnej przeglądarce. Miga, a następnie znika, prawdopodobnie przeglądarka zastanawia się, czy styl najechania faktycznie ma zastosowanie, czy nie.
Ale znalazłem rozwiązanie, które działa we wszystkich tych przeglądarkach. Nie twierdzę, że przetestowałem każdą wersję każdej przeglądarki lub że wiem, że będzie działać wiecznie, ale wydaje się, że teraz spełnia moje potrzeby.
To proste: ustaw pole wprowadzania pliku poza ekranem (pozycja: bezwzględna; góra: -5000px), umieść wokół niego element etykiety i uruchom kliknięcie etykiety zamiast samego pola pliku.
Zauważ, że link musi zostać napisany w skrypcie, aby wywołać metodę kliknięcia etykiety, nie robi to automatycznie, na przykład po kliknięciu tekstu w elemencie etykiety. Najwyraźniej element linku rejestruje kliknięcie i nie przenika do etykiety.
Zauważ również, że nie zapewnia to sposobu pokazania aktualnie wybranego pliku, ponieważ pole jest poza ekranem. Chciałem przesłać natychmiast po wybraniu pliku, więc nie jest to dla mnie problemem, ale będziesz potrzebować nieco innego podejścia, jeśli Twoja sytuacja jest inna.
źródło
JS Fiddle: http://jsfiddle.net/eyedean/1bw357kw/
źródło
Ten kod działa dla mnie. Czy to właśnie próbujesz zrobić?
źródło
Moje rozwiązanie dla Safari z jQuery i jQuery-ui:
źródło
Oto czyste rozwiązanie JavaScript tego problemu. Działa dobrze we wszystkich przeglądarkach
źródło
Istnieją sposoby przekierowania zdarzeń do kontrolki, ale nie oczekuj, że będziesz w stanie łatwo wywołać zdarzenia do kontrolki, ponieważ przeglądarki spróbują ją zablokować ze względów (dobrych) bezpieczeństwa.
Jeśli potrzebujesz, aby okno dialogowe pliku wyświetlało się tylko, gdy użytkownik kliknie coś, powiedzmy, ponieważ chcesz lepiej wyglądających przycisków przesyłania plików, możesz rzucić okiem to, co wymyślił Shaun Inman .
Byłem w stanie osiągnąć wyzwalanie klawiatury dzięki kreatywnemu przełączaniu ostrości pomiędzy kontrolą skrótu klawiszowego, naciśnięciem klawisza i zdarzeniami kluczowymi. YMMV.
Moją szczerą radą jest pozostawienie tego w spokoju, ponieważ jest to świat bólu niezgodności z przeglądarkami. Niewielkie aktualizacje przeglądarki mogą również blokować sztuczki bez ostrzeżenia i konieczne może być wymyślanie na nowo hacków, aby działało.
źródło
Badałem to jakiś czas temu, ponieważ chciałem utworzyć niestandardowy przycisk, który otworzy okno dialogowe pliku i natychmiast rozpocznie przesyłanie. Właśnie zauważyłem coś, co może to umożliwić - Firefox wydaje się otwierać okno dialogowe po kliknięciu dowolnego miejsca na przesyłanym pliku. Więc mogą to zrobić:
Jest to tylko teoretyczne, ponieważ użyłem już innej metody rozwiązania problemu, ale może po prostu działać.
źródło
Miałem
<input type="button">
tag ukryty w widoku. To, co zrobiłem, było dołączenie"onClick"
zdarzenia do dowolnego widocznego elementu dowolnego typu, takiego jak etykieta. Dokonano tego za pomocą Narzędzi programistycznych Google Chrome lub Firebug Mozilli Firefox za pomocą polecenia „edytuj HTML” prawym przyciskiem myszy. W tym przypadku określ następujący skrypt lub coś podobnego:Jeśli masz JQuery:
Jeśli nie:
Dzięki.
źródło
Hej, to rozwiązanie działa. do pobrania powinniśmy używać MSBLOB
Dla AngularJS lub nawet dla normalnego javascript.
źródło
Będzie to teraz możliwe w Firefoksie 4, z zastrzeżeniem, że liczy się ono jako okno wyskakujące, a zatem będzie blokowane za każdym razem, gdy byłoby to okno wyskakujące.
źródło
Oto rozwiązanie, które działa dla mnie: CSS:
HTML z „małą” pomocą JQuery:
Tylko upewnij się, że maskowane jest całkowicie objęte prawdziwym polem przesyłania.
źródło
Możesz to zrobić zgodnie z odpowiedzią z okna dialogowego Otwórz plik na znaczniku <a>
źródło
Odkryłem, że jeśli dane wejściowe (plik) są poza formą, uruchomienie zdarzenia kliknięcia wywołuje okno dialogowe pliku.
źródło
Mam nadzieję, że to komuś pomoże - spędziłem 2 godziny waląc w nie głową:
W IE8 lub IE9, jeśli uruchomisz otwieranie pliku wejściowego za pomocą javascript w jakikolwiek sposób (wierz mi, że wypróbowałem je wszystkie), nie pozwoli ci przesłać formularza za pomocą javascript, po prostu po cichu zawiedzie.
Przesłanie formularza za pomocą zwykłego przycisku wysyłania może działać, ale wywoływanie form.submit (); po cichu zawiedzie.
Musiałem uciekać się do nałożenia przycisku wyboru pliku przezroczystym plikiem wejściowym, który działa.
źródło
To działało dla mnie:
źródło
to nie jest niemożliwe:
Ale jakoś to działa tylko wtedy, gdy jest to funkcja, która została wywołana przez zdarzenie click.
Więc możesz mieć następującą konfigurację:
HTML:
JavaScript:
źródło
createEvent()
IinitMouseEvent()
były przestarzałe. Musisz użyćCustomEvent()
teraz ...Możesz użyć
źródło