Przycisk do pokazania wybierz plik do przesłania okno dialogowe

Question

Zamiast używania znacznika html , można otworzyć okno dialogowe choose a file to upload, klikając input type="button"? Kiedy plik zostanie wybrany z okna dialogowego choose a file to upload, ścieżka pliku zostanie wstawiona do zwykłego znacznika html input type="text"?

Wygląda na to, że Gmail robi coś podobnego, ale nie z przyciskami i tekstem, ma po prostu link add file lub coś w tym stylu. Po kliknięciu tego łącza wyświetlane jest okno dialogowe select file(s) to upload by mail.google.com. Po kliknięciu pliku nazwa pliku pojawia się na ekranie.

Jak oni to robią?

Answer 1

Myślę, że większość przeglądarek ma to zablokowane ze względów bezpieczeństwa. Przyciski i pola tekstowe można modyfikować za pomocą JavaScript. Pola wprowadzania plików nie mogą, i nie bez powodu; wyobraź sobie, że javascript może otworzyć okno dialogowe, ustawić ścieżkę do wrażliwego pliku w twoim systemie, a następnie zasymulować kliknięcie przycisku, aby pobrać plik!

---

Nawiasem mówiąc, jeśli szukasz to styl, być może to będzie działać: http://www.quirksmode.org/dom/inputfile.html

Answer 2

Nie jest możliwe, aby zmienić się input[type=file] jak chcesz, jest to czysto rodzimy element formularza.

Poza tym nie będzie można uzyskać ścieżki do pliku ze względów bezpieczeństwa. Stare wersje IE pokazują ścieżkę, ale nie jest tak już w przypadku nowszych wersji i tak czy inaczej nie będziesz w stanie nic zrobić ze ścieżką po stronie serwera.

Istnieją jednak pewne metody do stylu:

• Styling File Upload/Select Input Control
• Styling an input type="file"
• Styling file inputs with CSS and the DOM

Answer 3

spojrzeć plupload Używałem go wielokrotnie do obsługi przesyłania plików .

Answer 4

Sprawdź to skrzypce: http://jsfiddle.net/A4BS7/1/

UWAGA:

a) nie może działać dobrze na starszych przeglądarkach (IE) przede wszystkim, że nie ognia zdarzenie zmiany na wejściu pliku.

b) Aby przesyłanie działało zgodnie z oczekiwaniami, w formularzu należy podać element <input type="file">. Element tekstowy może służyć do wyświetlania wybranego pliku w najlepszym przypadku.

Answer 5

<input type="file" style="display:none;" id="inputfile"/> 
<a href="javascript:document.getElementById('inputfile').click(); ">try this</a> 

Wypróbuj tę. Myślę, że to jest przydatne .. :)