javascript - Image Upload with Preview in IE - Stack Overflow

admin管理员组

文章数量:1315367

I am working on image upload, I've to preview image before uploading(like implemented on twitter 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

I am working on image upload, I've to preview image before uploading(like implemented on twitter. 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

• javascript
• asp-mvc-3
• file-upload

Share Improve this question Follow asked Aug 25, 2012 at 8:40 Syed Salman Raza ZaidiSyed Salman Raza Zaidi 2,1921010 gold badges4646 silver badges8989 bronze badges 1

• try adding enctype = "multipart/form-data" to your view form. Just give this a try... – Yasser Shaikh Commented Aug 25, 2012 at 8:44

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

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 ponents (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.

 <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>

but work with IE

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

本文标签： javascriptImage Upload with Preview in IEStack Overflow