Question

我正在进行图片上传，我要在上传之前预览图像（比如在twitter.com上实现显示图片）

我已经编写了一些JS代码，这些代码在chrome和Firefox上运行良好，但不适用于IE（8或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="#" />

我已经在IE中调试了代码。 input.files在IE中显示为null，任何人都可以告诉解决方案或任何其他解决方案来实现该功能此致

Answer 1

这不适用于IE，因为代码依赖于IE不支持的HTML5文件API。它将从IE10开始支持它。因此，如果您需要支持低于10的IE，您可以使用一些现有的AJAX上传组件（Uploadify，Plupload，Valums AJAX Upload，Bleuimp，...）将文件上传到服务器，在服务器上生成并存储缩略图并使用JSON将保存的图像发送到客户端，以便它可以使用<img>标记显示它。实际上，由于IE支持Data URI Scheme，您不需要将上传的文件存储到服务器以生成预览。您可以直接从格式为数据URI方案的预览控制器操作返回生成的缩略图图像，以便您可以在客户端上显示它。

如果您没有时间和资源来实现此功能，另一种解决方案是简单地告诉您的用户，如果他们想要使用不同的Web浏览器来考虑他们应该考虑的图像的实时预览，因为您的网站没有为此支持IE。

Answer 2

.XXX tr.d0 td.special_class {
    background-color:yellow;
}

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

Answer 3

您可以尝试 Fancy ASP.NET MVC Image Uploader

Answer 4

但与IE合作

document.getElementById（'previmg'）。src =“file：///”+ input.value;

espero te sirva。

在IE中预览的图像上传

4 个答案: