Question

I am working on image upload, I’ve to preview image before uploading(like implemented on twitter.com for display pics)

I have write some JS code which is working fine on chrome and Firefox but not working on IE(8 or 9)

  function PreviewImg(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#previmg').attr('src', e.target.result);
            }

            reader.readAsDataURL(input.files[0]);
        }
    }


<input type="file" name="logofile" class="txtbox" onchange="PreviewImg(this);" />
  <img id="previmg" src="#" />

I have debugged the code in IE. input.files is appearing null in IE, can anyone tells the solution or any other solution to implement the functionality
Regards

Answer 1

This doesn’t work on IE because the code relies on the HTML5 File API that IE doesn’t support. It will start supporting it from IE10. So if you need to support IE lower than 10 you could upload the file to the server using some of the existing AJAX upload components (Uploadify, Plupload, Valums AJAX Upload, Bleuimp, …), generate and store a thumbnail on the server and send the url to the saved image to the client using JSON so that it could display it using an <img> tag. Actually since IE supports Data URI Scheme you don’t need to store the uploaded file to the server in order to generate the preview. You could directly return the resulting thumbnail image from your Preview controller action formatted as Data URI Scheme so that you could show it on the client.

Another solution if you don’t have the time and resources to implement this functionality is to simply tell your users that if they want to get a realtime preview of the image that they should consider using a different web browser because your site doesn’t support IE for this.