CODEWITHSUNDEEP
javascriptasp.net-mvc-3file-upload
Syed Salman Raza Zaidi
Syed Salman Raza Zaidi

Reputation: 2192

Image Upload with Preview in IE

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

Upvotes: 3

Views: 8352

Answers (3)

CARLOS HERNANDEZ
CARLOS HERNANDEZ

Reputation: 51

but work with IE

document.getElementById('previmg').src = "file:///" + input.value;

Upvotes: 0

jayan
jayan

Reputation: 11

 <script type="text/javascript">
            function loadname(img, previewName) {
                var isIE = false;
                if (jQuery.browser.msie) {
                    isIE = true;
                }
                var path = img.value;
                var ext = path.substring(path.lastIndexOf('.') + 1).toLowerCase();
                if (ext = "gif" || "jpeg" || "jpg" || "png") {
                    if (isIE) {
                      document.getElementById(previewName.id.toString()).src = path;
                        return;
                    } else {
                        if (img.files[0]) {
                            var reader = new FileReader();
                            reader.onload = function (e) {
                                $('#' + previewName).attr('src', e.target.result);
                            }
                            reader.readAsDataURL(img.files[0]);
                        }
                    }
                } else {
                    alert("You must select a valid image file!");
                }
            }



            var loadImageFile = (function () {
                if (window.FileReader) {
                    var oPreviewImg = null, oFReader = new window.FileReader(),
            rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;

                    oFReader.onload = function (oFREvent) {
                        if (!oPreviewImg) {
                            var newPreview = document.getElementById("imagePreview");
                            oPreviewImg = new Image();
                            oPreviewImg.style.width = (newPreview.offsetWidth).toString() + "px";
                            oPreviewImg.style.height = (newPreview.offsetHeight).toString() + "px";
                            newPreview.appendChild(oPreviewImg);
                        }
                        oPreviewImg.src = oFREvent.target.result;
                    };

                    return function () {
                        var aFiles = document.getElementById("imageInput").files;
                        if (aFiles.length === 0) { return; }
                        if (!rFilter.test(aFiles[0].type)) { alert("You must select a valid image file!"); return; }
                        oFReader.readAsDataURL(aFiles[0]);
                    }

                }
                if (navigator.appName === "Microsoft Internet Explorer") {
                    return function () {
                        document.getElementById("imagePreview").filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = document.getElementById("imageInput").value;

                    }
                }
            })();

    </script>
 <style>
        #imagePreview
        {
            width: 260px;
            height: 240px;
            float: right;
            filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
        }
    </style>
<div id="imagePreview"></div>
    <p><input id="imageInput" type="file" name="myPhoto" onchange="loadImageFile();"><br><input type="submit" value="Send" /></p>

Upvotes: 1

Darin Dimitrov
Darin Dimitrov

Reputation: 1038930

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.

Upvotes: 5

Related Questions