SCRIPT5007: Unable to get value of the property '0': object is null or undefined

Question

I ran this code through Chrome and Firefox and it works well. Whenever I run it through Internet Explorer for testing purposes it will not work. I checked the javascript consule and I'm getting: SCRIPT5007: Unable to get value of the property '0': object is null or undefined. Can someone please tell me why this is coming up and what I can do to fix it?

$('#audiofile1').bind('change', function () {
    if (this.files[0].type != 'image/png') {
        $('#audiofile1').each(function () {
            $(this).after($(this).clone(true)).remove();
        });
        alert(this.files[0].name + ' is not a valid file type.');
    } else {
        if (this.files[0].size > '5000') {
            $('#audiofile1').each(function () {
                $(this).after($(this).clone(true)).remove();
            });
            var size = this.files[0].size;
            var maxSize = 100;
            var exceedingSize = size - maxSize;
            alert(this.files[0].name + ' exceeds the maximum file size');
        } else {
            $("#audiofile1").fadeTo(1500, 0.20);
            alert(this.files[0].name + ' was added successfully.');
        }
    }
});

Answer 1

if (this.files[0].type != 'image/png') {

Inside your event handler, jQuery makes this the DOM element for which the handler was registered. Either that element does not have a defined files property, or that property's value is null or undefined.

This is because Internet Explorer 9 and below do not support the File API. You should probably just skip binding the handler if the File API is not available:

if ($('#audiofile1')[0].files) {
    $('#audiofile1').bind('change', function () {
        // ...
    });
}