В JavaScript можно ли программно вызвать событие «click» для элемента ввода файла?

Question

Я бы хотел, чтобы событие клика срабатывало на теге <input type="file"> программно.

Просто вызов click (), похоже, ничего не делает или, по крайней мере, не вызывает диалоговое окно выбора файла.

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

Answer 1

Надеюсь, это кому-нибудь поможет - я потратил 2 часа, стуча головой об это:

В IE8 или IE9, если вы вообще инициируете открытие ввода файла с помощью javascript (поверьте мне, я их все перепробовал), он не позволит вам отправить форму с использованием javascript, просто произойдет сбой .

Отправка формы с помощью обычной кнопки отправки может работать, но вызывается form.submit (); тихо потерпит неудачу.

Мне пришлось прибегнуть к наложению кнопки выбора файла на прозрачный файл, который работает.

Answer 2

Теперь это будет возможно в Firefox 4 с предупреждением о том, что оно считается всплывающим окном и поэтому будет блокироваться всякий раз, когда всплывающее окно было бы.

Answer 3

это не невозможно:

var evObj = document.createEvent('MouseEvents');
evObj.initMouseEvent('click', true, true, window);  
setTimeout(function(){ document.getElementById('input_field_id').dispatchEvent(evObj); },100);

Но так или иначе это работает, только если это находится в функции, которая была вызвана через событие щелчка.

Таким образом, вы можете иметь следующую настройку:

HTML:

<div onclick="openFileChooser()" class="some_fancy_stuff">Click here to open image chooser</div>
<input type="file" id="input_img">

JavaScript:

    function openFileChooser() {
      var evObj = document.createEvent('MouseEvents');
      evObj.initMouseEvent('click', true, true, window);  
      setTimeout(function()
      { 
        document.getElementById('input_img').dispatchEvent(evObj);      
      },100);      
    }

Answer 4

Вы можете сделать это согласно ответу от Диалоговое окно «Открыть файл» для тег

<input type="file" id="upload" name="upload" style="visibility: hidden; width: 1px;     height: 1px" multiple />
<a href="" onclick="document.getElementById('upload').click(); return false">Upload</a>

Answer 5

Я обнаружил, что если вход (файл) находится за пределами формы, то при щелчке при запуске запускается диалог файла.

Answer 6

Вот решение, которое работает для меня: CSS:

#uploadtruefield {
    left: 225px;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 266px;
    opacity:0;
    -moz-opacity:0;
    filter:alpha(opacity:0);
    width: 270px;
    z-index: 2;
}

.uploadmask {
    background:url(../img/browse.gif) no-repeat 100% 50%;
}
#uploadmaskfield{
    width:132px;
}

HTML с «маленькой» справкой JQuery:

<div class="uploadmask">
    <input id="uploadmaskfield" type="text" name="uploadmaskfield">
</div>
<input id="uploadtruefield"  type="file" onchange="$('#uploadmaskfield').val(this.value)" >

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

Answer 7

Это сработало для меня:

<script>
    function sel_file() {
        $("input[name=userfile]").trigger('click');
    }  
</script>

<input type="file" name="userfile" id="userfile" />

<a href="javascript:sel_file();">Click</a>

Answer 8

Вы можете использовать

<button id="file">select file</button>
<input type="file" name="file" id="file_input" style="display:none;">
<script>
$('#file').click(function() {
        $('#file_input').focus().trigger('click');
    });
</script>