IE Java script error Unable to get value of the property '0':

Question

I have an:

<img id="uploadedimage" alt="uploaded image" src="" width="250px" height="250px"/>

and have a div to display the image once the user has selected their image using this JQuery code:

$('#BusinessImage').change(function (ev) {

            var f = ev.target.files[0];
            var fr = new FileReader();
            var IsImage = false;

            // check the file is an image
            if (f.type.match('image.*')) {
                IsImage = true;
            }

            fr.onload = function (ev2) {
                if (IsImage) {
                    $('#uploadedimage').attr('src', ev2.target.result);  
                }
            };

            if (IsImage) {
                fr.readAsDataURL(f);
                ValidFileUpload();
            }
            else {
                InvalidFileUpload();
            }
        });

Of course this code works great in every other browser apart from Satans browser, Internet Explorer. I get this error:

Line: 108
Character: 13
Code: 0
Error Message: Unable to get value of the property '0': object is null or undefined

Does anyone have any idea what is causing this as it works great in FFX and Chrome.

Thanks

Answer 1

".files" work only on those browsers that support HTML5.

Files is supported on IE10 but for IE9 and early versions you must use other way to get path.:

To check if files is supported:

if( ev.target.files ){
  //supported
  console.log( ev.target.files[0] );
}else{
  //.files not supported
  console.log( ev.target.value );
}