3

我正在上传图片，我必须在上传之前预览图片（就像在 twitter.com 上实现的显示图片一样）

我写了一些在 chrome 和 Firefox 上运行良好但在 IE（8 或 9）上运行良好的 JS 代码

  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 中显示为空，任何人都可以告诉解决方案或任何其他解决方案来实现功能问候

4

3 回答 3

5

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

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

于 2012-08-25T08:47:05.980 回答
1 

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

于 2015-06-18T08:57:15.000 回答
0

但使用 IE

document.getElementById('previmg').src = "file:///" + input.value;
于 2013-02-04T14:40:28.100 回答