JQuery: стрельба нажмите () на вход: файл?

Question

В настоящее время я пытаюсь изменить стиль (eclipse) элемента fileupload на моем веб-сайте с помощью этой ссылки . Все хорошо, и результат обнадеживает, когда я помещаю элемент fileupload под моим новым альтернативным изображением (как указано в вышеупомянутом уроке). Теперь я хочу разместить элемент fileinput в другом месте и связать функцию щелчка на изображении с щелчком на элементе fileinput, чтобы запустить диалоговое окно обозревателя файлов.

Увы обычный $('input:file').click() или $('input:file').trigger('click') не работает.

Меня также интересуют другие способы запуска диалогового окна файла, без элемента загрузки файла (это только для обработки JavaScript, без загрузки на сервер).

О, это не должно работать на любой версии IE.

Answer 1

Пропустите цитату в обоих примерах кода, попробуйте $('input:file').trigger('click') Однако, насколько я знаю, это невозможно сделать, по крайней мере, так.Это специально разработано таким образом, специально для проблем безопасности.

Вы можете попытаться сделать это, отслеживая движение мыши и перемещая скрытый файл ввода поверх нового изображения или что вы будете использовать для стилизации ввода.

Answer 2

Как вы делаете это прямо сейчас, можете дать нам еще немного кода? Также попробуйте добавить уникальный идентификатор для ввода файла и поле, которое вы хотите вызвать. Например:

<span id="browse">Click here to choose a file</span>
<input type="file" id="file" />

Тогда попробуйте сделать:

$('#browse').bind('click', function(e) {
  $('#file').click();
});

Answer 3

<div class="imageUploadInput">
    <img id="uploadImage" src="images/camera_icon.png" />
    <input type="file" name="thumb" id="uploadImageInput" />
</div>

JQuery:

$('#uploadImage').livequery("click",function(){
    $('#uploadImageInput').trigger('click');
});

или

$('#uploadImage').click(function(){
   $('#uploadImageInput').trigger('click');
});