Задать вопрос
@Voucik
javascript

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

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

Сам код
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?
  • Вопрос задан
  • 7900 просмотров
Комментировать
Подписаться 2 Оценить Комментировать
Решения вопроса 1
RubaXa
@RubaXa
1. Не работает только первый вызов, т.к. диалог блокирующий, назначение слушателя на "change" происходит уже после выбора файлов (вот рабочий вариант).

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

3. Ну и сам код хорошо бы переписать, на что-нибудь внятное, например так. Сейчас это мешанина из jQuery, onclick, document.getElementById и т.п.
Ответ написан
1 комментарий
1 комментарий
Пригласить эксперта
Ответы на вопрос 5
linoleum
@linoleum
Попробуйте использовать .click() вместо .change()
Ответ написан
Комментировать
Комментировать
aen
@aen
Keep calm and 'use strict';
Иногда в таких случаях в IE событие change заменяют на click. Насколько это работоспособно в вашем случае - решать только вам.
Ответ написан
Комментировать
Комментировать
@Voucik Автор вопроса
Пробовал, так 
$('#' + typeFileId).click(function () {
            alert('ok');
        });

Не работает.
Ответ написан
1 комментарий
1 комментарий
karneds
@karneds
Для ие можно воспользоваться 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."
Ответ написан
Комментировать
Комментировать
doodoo
@doodoo
Ох уж этот ие. Столкнулся однажды с такой же проблемой.. Решение было таким: ие не генерит событие если инпут был нажать программно и display:none (не помню как точно), прям как у вас.

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

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

пруф
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
summer • Ярославль
от 100 000 до 140 000 ₽
Junior JavaScript Developer
КРАФТТЕК • Санкт-Петербург
от 60 000 до 80 000 ₽
JavaScript разработчик
Мэтч
от 80 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Взлом автомобильной программы
19 апр. 2024, в 05:01
999999 руб./за проект
Доработать телеграм бота
19 апр. 2024, в 03:52
1000 руб./за проект
Написать код на python
19 апр. 2024, в 03:01
1000 руб./за проект
Ещё заказы