IE8/9 本地预览上传图片

本地预览的意思是，在选择图片之后先不上传到服务器，而是由一个

<img>

标签来预览本地的图片，非 IE8/9 浏览器可以从

<input type=“file”/>

中获取到图片流，然后设置到

<img src=“”>

进行显示，但 IE8/9 浏览器只能获取到本地图片的绝对路径，并且设置 src 是无效的。

解决上面问题的方式是采用 css 图片滤镜，示例代码：

<!-- 要设置图片预览区域的大小 -->
<p class="img-wrap">
    <img name="prevPic" id="prevPic" src="" />
    <input name="uploadImage" id="uploadImage" type="file" />
</p>

<script type="text/javascript">
	$('#uploadImage').change(function (e) {
        if (navigator.userAgent.indexOf('MSIE 8') >= 0 || navigator.userAgent.indexOf('MSIE 9') >= 0) {
            $(this).select();
            window.parent.document.body.focus();
            var realpath = document.selection.createRange().text;
            $(this).parent().css("filter", "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',src=\"" + realpath + "\",sizingMethod=scale)");
        }
        else {
            var file = e.delegateTarget.files[0];
            var reader = new FileReader();
            var targetId = e.target.id;
            reader.readAsDataURL(file);
            reader.onload = function () {
                var picString = reader.result;
                $("#prevPic").attr({ "src": picString }).show();
            };
        }
    });
</script>
           

获取

realpath

是为了解决发布 IIS 之后，出现本地图片路径变成

C:\fakepath\xxxx.jpg

的问题。

作者：田园里的蟋蟀

微信公众号：你好架构

出处：http://www.cnblogs.com/xishuai/

公众号会不定时的分享有关架构的方方面面，包含并不局限于：Microservices（微服务）、Service Mesh（服务网格）、DDD/TDD、Spring Cloud、Dubbo、Service Fabric、Linkerd、Envoy、Istio、Conduit、Kubernetes、Docker、MacOS/Linux、Java、.NET Core/ASP.NET Core、Redis、RabbitMQ、MongoDB、GitLab、CI/CD（持续集成/持续部署）、DevOps等等。

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接。

分享到：

QQ空间

新浪微博

腾讯微博

微信

更多