jQuery не работает в IE9. addEventListener Issue

Question

Я немного новичок, когда дело доходит до jQuery, и изменил сценарий загрузки, который я нашел в режиме онлайн. Он делает все, что я ожидаю в Chrome. Я тестировал его в Internet Explorer, и это дает следующее сообщение об ошибке: -

SCRIPT438: Object doesn't support property or method 'addEventListener' upload.js, line 21 character 3.

Я сделал некоторые исследования и, кажется, addEventListener не поддерживается в IE. Может ли кто-нибудь помочь мне в настройке кода, чтобы заставить его работать, пожалуйста. Огромное спасибо.

(function() { 
    var input = document.getElementById("images"), 
     oID = $('#oID').val(), 
     formdata = false; 

    function showUploadedItem(source) { 
     var list = document.getElementById("image-list"), 
      li = document.createElement("li"), 
      img = document.createElement("img"); 
     img.src = source; 
     li.appendChild(img); 
     list.appendChild(li); 
    } 

    if (window.FormData) { 
     formdata = new FormData(); 
     document.getElementById("btn").style.display = "none"; 
    } 

    input.addEventListener("change", function (evt) { 
     document.getElementById("response").innerHTML = "Uploading . . ." 
     var i = 0, 
      len = this.files.length, 
      img, reader, file; 

     for (; i < len; i++) { 
      file = this.files[i]; 

      if (!! file.type.match(/image.*/)) { 
       if (window.FileReader) { 
        reader = new FileReader(); 
        reader.onloadend = function (e) { 
         showUploadedItem(e.target.result, file.fileName); 
        }; 
        reader.readAsDataURL(file); 
       } 
       if (formdata) { 
        formdata.append("images[]", file); 
       } 
      } 
     } 

     formdata.append("oID", oID); 
     if (formdata) { 
      $.ajax({ 
       url: "upload.php", 
       type: "POST", 
       data: formdata, 
       processData: false, 
       contentType: false, 
       success: function (res) { 
        document.getElementById("response").innerHTML = res; 
       } 
      }); 
     } 
    }, false); 
}()); 

Answer 1

Try -

$(input).change(function (evt) { 
    // your code 
}); 

или -

$("#images").change(function (evt) { 
    // your code 
}); 

Вы используете JQuery, верно? Если это так, то изменить свой код, как это -

1. Вместо того, чтобы выбрать элемент с помощью document.getElementById(id), попробуйте выбрать их с помощью $("#your_id_string").
2. Вместо того, чтобы скрываться элемент, используя document.getElementById(id).style.display = "none";, попробуйте $("#your_id_string").hide()
3. Вместо того, чтобы изменить HTML текст с помощью document.getElementById("response").innerHTML = "text", попробуйте использовать $("#response").html("text")

и ваш код будет гораздо чище.

Также обратите внимание, что у вас есть ошибка в коде. Объявление анонимной функции неверно. Попробуйте это -

$(document).ready(function() { 
    var input = document.getElementById("images"), 
    oID = $('#oID').val(), 
    formdata = false; 

    // rest of your code. 
});