Как активировать input file поля с помощью click()?

Question

[101010101010]

Здравствуйте, нужно эмулировать нажатие на input file поле с помощью js.
Сейчас пытаюсь довести до ума такое решение

$(function() {
            $("#formUploadBtn").click(function() {
                $("#formInput").click();
            });
        });

<form id="test_form" method="post" action="">
        <input type="file" id="formInput"/>
        <button id="formUploadBtn">Upload</button>
 </form>

когда input входит в form группу страница перегружается и ничего не работает. Как решить эту проблема ?

Answer 1

[Роман Скрябин]

е мае ответ то прост - кнопка субмитит форму )
Для того что бы не было субмита

$(function () {
    $("#formUploadBtn").click(function () {
        $("#formInput").click();
        return false;
    });
    $('#formInput').change(function () {
        $('#test_form').submit();
    })
});

jsfiddle.net/mLgeLtgy

Comments

[Евгений Петров]

Проще указать атрибут type="button"

[Роман Скрябин]

Евгений Петров: ну я написал из расчета, что при выборе файла - пойдет отправка формы. А так - Вы правы.

[101010101010]

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

[Евгений Петров]

101010101010: Она не пустая — атрибут type есть всегда. Просто используется значение по умолчанию.
Для input — это text, а для button это может быть как submit, так и button, в зависимости от вендора.

Answer 2

[Дмитрий]

focus() на поле не пробовали ставить?

Comments

[101010101010]

пробовал, тот же результат.

[Дмитрий]

101010101010: у вас заголовок вопроса и суть вопроса - разные. Поэтому я дал вам неверный ответ. Точнее верный, но относящийся к другому

[PAJCH]

change(); вот так можно сэмулировать

[PAJCH]

document.getElementById('input').change();