Программно запустить диалоговое окно "выбрать файл"

Ответ 1

Если вы хотите иметь собственную кнопку для загрузки файла вместо <input type="file" />, вы можете сделать что-то вроде:

<input id="myInput" type="file" style="visibility:hidden" />
<input type="button" value="Show Dialog" onclick="$('#myInput').click();" />

Обратите внимание, что я использовал visibility: hidden вместо display: none. Вы не можете вызвать событие клика при вводе не отображаемого файла.

Ответ 2

В большинстве ответов отсутствует полезная информация:

Да, вы можете программно щелкнуть элемент ввода с помощью jQuery/JavaScript, но только если вы сделаете это в обработчике событий, принадлежащем событию, которое НАЧАЛО ПОЛЬЗОВАТЕЛЕМ!

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

P.S. Ключевое слово debugger; нарушает окно просмотра, если оно находится перед программным щелчком... по крайней мере в chrome 33...

Ответ 3

Только для записи есть альтернативное решение, которое не требует javascript. Это немного взломать, используя тот факт, что нажатие на метку устанавливает фокус на соответствующий вход.

Вам нужен <label> с правильным атрибутом for (указывает на ввод), optionnaly, как кнопка (с бутстрапом, используйте btn btn-default). Когда пользователь нажимает метку, открывается диалоговое окно, например:

<!-- optionnal, to add a bit of style -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>

<!-- minimal setup -->
<label for="exampleInput" class="btn btn-default">
  Click me
</label>
<input type="file" id="exampleInput" style="display: none" />

Ответ 4

Я не уверен, как браузеры обрабатывают клики по элементам type="file" (проблемы безопасности и все), но это должно работать:

$('input[type="file"]').click();

Я тестировал этот JSFiddle в Chrome, Firefox и Opera, и все они показывают диалог просмотра файлов.

Ответ 5

Лучшее решение, работает во всех браузерах.. даже на мобильных устройствах.

<div class="btn" id="s_photo">Upload</div>

<input type="file" name="s_file" id="s_file" style="opacity: 0;">';

// jquery

<script>
    $("#s_photo").click(function() {
        $("#s_file").trigger("click");
    });
</script>

Скрытие типа входного файла вызывает проблемы с браузерами, непрозрачность - лучшее решение, потому что оно не скрывается, просто не отображается.:)

Ответ 6

Натурально единственный способ - создать элемент <input type="file">, а затем, к сожалению, имитировать щелчок.

Там крошечный плагин (бесстыдный плагин), который избавит вас от необходимости делать это все время: file-dialog

fileDialog()
    .then(file => {
        const data = new FormData()
        data.append('file', file[0])
        data.append('imageName', 'flower')

        // Post to server
        fetch('/uploadImage', {
            method: 'POST',
            body: data
        })
    })

Ответ 7

Я переношу input[type=file] в тег метки, а затем стиль label по вашему вкусу и скрою input.

<label class="btn btn-default fileLabel" data-toggle="tooltip" data-placement="top" title="Upload">
    <input type="file">
    <span><i class="fa fa-upload"></i></span>
</label>

<style>
    .fileLabel input[type="file"] {
        position: fixed;
        top: -1000px;
    }
</style>

Чисто CSS-решение.

Ответ 8

Нет способа перекрестного браузера сделать это по соображениям безопасности. То, что обычно делают люди, это наложение входного файла на что-то другое и его видимость на скрытие, поэтому он запускается сам по себе. Дополнительная информация здесь

Ответ 9

Используя jQuery, вы можете вызвать click() для имитации щелчка.

Ответ 10

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

$('#fileInput').val('');