兼容FF/IE在页面预览客户端本地图片方法

JavaScript #本地图片2012-05-21 14:07

IE为了安全是不允许页面预览客户端本地图片的，也就是img元素的SRC是相对路径不可能是绝对路径的有一种解决方法是上传到服务器后返回相对路径但是效率是个问题，编程复杂度也会提高。

直接上代码：

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

通过JS获取用户本地图片路径 2012/05/21
JS实现回到顶部按钮的代码 2012/05/20
Javascript中匿名函数的调用方法 2012/05/19
比较js的对象 2012/05/19
JavaScript将光标定位于输入框最右侧的方法 2012/05/19
Javascript操作select控件(新增、修改、删除、选中等） 2012/05/19
ajax中文乱码问题解决方法 2012/05/19
javascript检测浏览器及其版本的代码 2012/05/19
JavaScript实现禁止右键、复制、另存为、查看源文件 2012/05/18
javascript解决图片缩放问题 2012/05/18

JS 基础

JS 对象

JS 高级

JS 实例

JS 参考手册

兼容FF/IE在页面预览客户端本地图片方法

相关文章