JQuery триггер файла ввода

Question

Я пытаюсь вызвать окно загрузки (кнопка просмотра) с помощью jQuery.
Метод, который я попробовал сейчас:

$('#fileinput').trigger('click');   

Но, похоже, это не работает. Пожалуйста помоги. Спасибо.

Answer 1

Это очень старый вопрос, но, к сожалению, этот вопрос все еще актуален и требует решения.

(Удивительно простое) решение, которое я придумал, заключается в том, чтобы «скрыть» поле ввода реального файла и обернуть его тегом LABEL (может быть улучшен для Bootstrap и HTML5).

See here: Пример кода здесь

Таким образом, поле ввода реального файла невидимо, и все, что вы видите, это настраиваемая «кнопка», которая на самом деле является модифицированным элементом LABEL. Когда вы щелкаете по этому элементу LABEL, появляется окно для выбора файла, и файл, который вы выбираете, переходит в поле ввода реального файла.

Кроме того, вы можете манипулировать внешним видом и поведением по своему усмотрению (например: получить имя выбранного файла из входного файла файла после выбранного и показать его где-нибудь. Элемент LABEL не подходит это автоматически, конечно. Обычно я просто помещаю его внутри LABEL, как его текстовое содержимое).

Осторожно, хотя! Манипулирование внешним видом и поведением ограничено тем, что вы можете себе представить и придумать. ;-); -)

Answer 2

или просто

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

Answer 3

Мне удалось с помощью простого $ (...). Click (); с JQuery 1.6.1

Answer 4

На самом деле, я нашел очень простой способ для этого, а именно:

$('#fileinput').show().trigger('click').hide();   

Таким образом, ваше поле ввода файла может иметь свойство css display on none и все еще выигрывать сделку

Answer 5

У меня были проблемы с пользовательской проверкой на стороне клиента для <input type="file"/> при использовании фальшивой кнопки для ее запуска, и решение @Guillaume Bodi работало для меня (также с opacity: 0; на chrome)

$("#MyForm").on("click", "#fake-button", function () {
        $("#uploadInput").focus().trigger("click");
    });

и стиль CSS для ввода ввода

#uploadInput {
opacity: 0.0; 
filter: alpha(opacity=0); /* IE lt 8 */
-ms-filter: "alpha(opacity=0)"; /* IE 8 */
-khtml-opacity: 0.0; /* Safari 1.x */
-moz-opacity: 0.0;
}

Answer 6

Попробуйте, это взломать. Положение: абсолютное значение для Chrome, а триггер («изменение») для IE.

var hiddenFile = $("<input type=\"file\" name=\"file\" id=\"file1\" style=\"position:absolute;left:-9999px\" />");
$('body').append(hiddenFile);

$('#aPhotoUpload').click(function () {
    hiddenFile.trigger('click');
    if ($.browser.msie)
        hiddenFile.trigger('change');
});

hiddenFile.change(function (e) {
    alert('TODO');
});

Answer 7

Моя проблема была немного другой на iOS 7. Оказалось, что FastClick вызывал проблемы. Все, что мне нужно было сделать, это добавить class="needsclick" к моей кнопке.

Answer 8

Вероятно, это лучший ответ, учитывая кросс-браузерные проблемы.

CSS:

#file {
  opacity: 0;
  width: 1px;
  height: 1px;
}

JS:

$(".file-upload").on('click',function(){
   $("[name='file']").click();
});

HTML:

<a class="file-upload">Upload</a>
<input type="file" name="file">

Answer 9

Основываясь на ответе Гийома Боди, я сделал это:

$('.fileinputbar-button').on('click', function() {
    $('article.project_files > header, article.upload').show();
    $('article.project_files > header, article.upload header').addClass('active');
    $('.file_content, article.upload .content').show();
    $('.fileinput-button input').focus().click();
    $('.fileinput-button').hide();
});

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