Как связать кнопку ввода с окном выбора файла?

Возможный дубликат:
Ввод файла триггера JQuery

Я работаю над формой, которая позволяет пользователям загружать изображения на веб-сайт. Пока у меня есть решение перетаскивания, работающее в Chrome и Safari. Однако мне также необходимо поддерживать действие пользователей, которые нажимают кнопку и просматривают файлы традиционным образом.

Подобно тому, что это сделало бы:

<input type="file" name="my_file">

Однако вместо того, чтобы иметь неуклюжую область описания файла и не редактируемую кнопку "Обзор", я бы скорее использовал что-то вроде этого:

<input type="button" id="get_file">

Поэтому мой вопрос заключается в том, как заставить эту кнопку открывать окно выбора файла и обрабатывать выбор так же, как type="file" будет работать?

Приветствия.

Мое решение

HTML:

<input type="button" id="my-button" value="Select Files">
<input type="file" name="my_file" id="my-file">

CSS

#my-file { visibility: hidden; }

JQuery

$('#my-button').click(function(){
    $('#my-file').click();
});

Работа в Chrome, Firefox и IE7 + до сих пор (не пробовал IE6).

Ответ 1

Вы можете использовать JavaScript и запускать скрытый ввод файла при нажатии кнопки.

http://jsfiddle.net/gregorypratt/dhyzV/ - простой

http://jsfiddle.net/gregorypratt/dhyzV/1/ - fancier с небольшим JQuery

Или вы можете поменять div непосредственно над вводом файла и установить pointer-events в CSS на none, чтобы события click могли проходить через вход файла, который находится "за" fancy div. Однако это работает только в некоторых браузерах; http://caniuse.com/pointer-events

Ответ 2

Если вы хотите разрешить пользователю просматривать файл, вам нужно иметь input type="file". Ближайшим, к которому вы могли бы обратиться, было бы разместить input type="file" на странице и скрыть его. Затем активируйте событие щелчка входа при нажатии кнопки:

#myFileInput {
    display:none;
}

<input type="file" id="myFileInput" />
<input type="button"
       onclick="document.getElementById('myFileInput').click()" 
       value="Select a File" />

Здесь рабочая скрипка.

Примечание: Я бы не рекомендовал этот подход. input type="file" - это механизм, который пользователи привыкли использовать для загрузки файла.