Почему input type = file .change событие не работает в ie?

Question

[Voucik]

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

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


Сам код
Html

<div class="FileSection">
              <font>
                  Загрузка списка  
              </font>
              <a  onclick="BrowseFile('labelFile','OFD','ButtonUpload')" title="Выбрать файл">
                  <img src="../../Images/open_folder_green.png" height="25" width="25" />
              </a>
              <a id = "ButtonUpload" onclick="checkFile()" style="display: none;" title="Загрузить">
                <img src="../../Images/file_upload.png" height="25" width="25" />
              </a>
              <input type="file" id="OFD" name="OFD" style="display: none;">
              <label id="labelFile"></label>
          </div>

и js код

function BrowseFile(labelId, typeFileId, ButtonUploadId) {
    $('#' + typeFileId).click();
        $('#' + typeFileId).change(function () {
            document.getElementById(labelId).innerHTML = $(this).val();
            $('a#' + ButtonUploadId).show();

        });
}

Так вот, всё это классно работает, но в Хроме, а в IE не работает. Узнал, что в IE не работает функция .change.
Подскажите пожалуйста. Как сделать так, чтоб работало в IE?

Answer 1

[RubaXa]

1. Не работает только первый вызов, т.к. диалог блокирующий, назначение слушателя на "change" происходит уже после выбора файлов (вот рабочий вариант).

2. Сейчас у вас при каждом вызове "BrowseFile()" вешается слушатель на "change" и не снимается, т.е. кликнув 10 раз, мы получим 10 слушателей события "change".

3. Ну и сам код хорошо бы переписать, на что-нибудь внятное, например так. Сейчас это мешанина из jQuery, onclick, document.getElementById и т.п.

Comments

[Voucik]

Спасибо, огромное

Answer 2

[linoleum]

Попробуйте использовать .click() вместо .change()

Answer 3

[aen]

Иногда в таких случаях в IE событие change заменяют на click. Насколько это работоспособно в вашем случае - решать только вам.

Answer 4

[Voucik]

Пробовал, так

$('#' + typeFileId).click(function () {
            alert('ok');
        });

Не работает.

Comments

[Михаил Шатилов]

не сочтите за рекламу.
посмотрите в форме заказа ornatus .ru/order

Answer 5

[Денис]

Для ие можно воспользоваться propertychange
Но хочу сразу предупредить

"IE doesn't allow manipulation of the type="file" input element from javascript due to security reasons. Setting the filename or invoking a click event to show the browser dialog will result in an "Access is denied" error on the form submit - Internet Explorer is clever about remembering what methods have been invoked."

Answer 6

[Damir Makhmutov]

Ох уж этот ие. Столкнулся однажды с такой же проблемой.. Решение было таким: ие не генерит событие если инпут был нажать программно и display:none (не помню как точно), прям как у вас.

Попробуйте так:
$(field).show().focus().click().hide();

Кроме шуток, мне помогло именно это :-)

пруф