Кнопка для отображения выберите файл для загрузки диалогового окна

Question

Вместо использования тега input type="file" html можно ли вызвать диалоговое окно choose a file to upload, щелкнув input type="button"?Затем, когда файл выбран из диалогового окна choose a file to upload, путь к файлу вставляется в обычный тег html input type="text"?

Мне кажется, что Gmail делает что-то подобное, но не с кнопками и вводом текста, у них просто есть ссылка add file или что-то в этом роде.При щелчке по этой ссылке отображается диалоговое окно select file(s) to upload by mail.google.com.При нажатии на файл имя файла отображается на экране.

Как они это делают?

Answer 1

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

Попробуйте это.Я думаю, что это полезно ..:)

Answer 2

Я думаю, что большинство браузеров заблокировали это в целях безопасности.Кнопками и текстовыми полями можно управлять с помощью JavaScript.Поле ввода файла не может и не зря;представьте, если javascript может открыть диалоговое окно, установить путь к конфиденциальному файлу в вашей системе, а затем смоделировать щелчок, чтобы загрузить файл!

---

Кстати, если вы хотите стилизовать его, возможно, это будет работать: http://www.quirksmode.org/dom/inputfile.html

Answer 3

Проверьте эту скрипту: http://jsfiddle.net/A4BS7/1/

ПРИМЕЧАНИЕ:

a) Это может не работать на старых браузерах (в основном IE), которые не запускаютСобытие change при вводе файла.

b) Чтобы загрузка работала должным образом, вам необходимо включить в форму элемент <input type="file">.Текстовый элемент может быть использован для отображения выбранного файла в лучшем случае.

Answer 4

Посмотрите на plupload , я много раз использовал его для обработки загрузки файлов.

Answer 5

Невозможно изменить input[type=file], как вам нравится, это чисто нативный элемент формы.

Кроме того, вы не сможете получить путь к файлу по соображениям безопасности. Старые версии IE показывают путь, но с более новыми версиями это не так, и вы все равно не сможете ничего сделать с путем на стороне сервера.

Есть несколько методов для стилизации:

• Стилизация загрузки файла / Выбор элемента управления вводом
• Стилизация типа ввода = "файл"
• Стилизация ввода файлов с помощью CSS и DOM