jQuery not working in IE9. addEventListener Issue

Question

I am a bit of a newbie when it comes to jQuery and have modified an upload script that I found on line. It is doing everything I expect in Chrome. I tested it in Internet Explorer and it is giving the following error:-

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

I have done some research and it seems addEventListener isn't supported in IE. Could any one help me in tweaking the code to get it working please. Thanks very much.

(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
});

or -

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

You are using jQuery, right? If this is the case, then change your code like this -

1. Rather than selecting element using document.getElementById(id), try selecting them by using $("#your_id_string").
2. Rather than hiding element using document.getElementById(id).style.display = "none";, try $("#your_id_string").hide()
3. Rather than changing html text using document.getElementById("response").innerHTML = "text", try using $("#response").html("text")

and your code will be much cleaner.

Also, notice that you have error in your code. Your anonymous function declaration is not correct. Try this -

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

    // rest of your code.
});