如何在页面预览客户端本地图片兼容FF IE

最新推荐文章于 2024-09-16 08:47:17 发布

weixin_34092455

最新推荐文章于 2024-09-16 08:47:17 发布

阅读量84

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/ahjesus/archive/2012/05/20/2510883.html

版权

IE为了安全是不允许页面预览客户端本地图片的，也就是img元素的SRC是相对路径不可能是绝对路径的

为了达成这一需求需要使用滤镜

公司最近有个项目有这样的需求我才发现我之前写的如何通过JS获取用户本地图片路径这篇文章里所使用的方法只支持本地页面预览本地图片

有一种解决方法是上传到服务器后返回相对路径但是效率是个问题，编程复杂度也会提高

直接上demo代码为更多有这种需求又苦于找不到解决方案的同行提供源码转载请注明出处我这里还有更多的其他问题的解决方案供更多人参考

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>get file input full path</title>
    <script type="text/javascript" language='javascript'>
        function getFullPath(obj) {
            var newPreview = document.getElementById("img");
            if (obj) {
                //ie 
                if (window.navigator.userAgent.indexOf("MSIE") >= 1) {
                    obj.select();
                    newPreview.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);";
                    newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = document.selection.createRange().text;

                    return;
                }
                //firefox 
                else if (window.navigator.userAgent.indexOf("Firefox") >= 1) {
                    if (obj.files) {
                        newPreview.src = window.URL.createObjectURL(obj.files.item(0));

                        return;
                    }
                    newPreview.src = obj.value;

                    return;
                }
                newPreview.src = obj.value;

                return;
            }
        }
    </script>
</head>
<body>
    <input type="file" onchange="getFullPath(this);" />
    <img id="img" alt="" style="width:200px; height:200px;" src="你自己的透明图片"/>
</body>
</html>