<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

    <title></title>

</head>

<body>

    <div id="divPreview">

        <img id="imgHeadPhoto" src="noperson.jpg" style="width: 160px; height: 170px; border: solid 1px #d2e2e2;"

            alt="" />

    </div>

    <input type="file" onchange="PreviewImage(this,'imgHeadPhoto','divPreview');" size="" />

    <script type="text/javascript">

        //js本地图片预览，兼容ie[6-9]、火狐、Chrome17+、Opera11+、Maxthon3

        function PreviewImage(fileObj, imgPreviewId, divPreviewId) {

            var allowExtention = ".jpg,.bmp,.gif,.png"; //允许上传文件的后缀名document.getElementById("hfAllowPicSuffix").value;

            var extention = fileObj.value.substring(fileObj.value.lastIndexOf(".") + ).toLowerCase();

            var browserVersion = window.navigator.userAgent.toUpperCase();

            if (allowExtention.indexOf(extention) > -) {

                if (fileObj.files) {//HTML5实现预览，兼容chrome、火狐7+等

                    if (window.FileReader) {

                        var reader = new FileReader();

                        reader.onload = function (e) {

                            document.getElementById(imgPreviewId).setAttribute("src", e.target.result);

                        }

                        reader.readAsDataURL(fileObj.files[]);

                    } else if (browserVersion.indexOf("SAFARI") > -) {

                        alert("不支持Safari6.0以下浏览器的图片预览!");

                    }

                } else if (browserVersion.indexOf("MSIE") > -) {

                    if (browserVersion.indexOf("MSIE 6") > -) {//ie6

                        document.getElementById(imgPreviewId).setAttribute("src", fileObj.value);

                    } else {//ie[7-9]

                        fileObj.select();

                        if (browserVersion.indexOf("MSIE 9") > -)

                            fileObj.blur(); //不加上document.selection.createRange().text在ie9会拒绝访问

                        var newPreview = document.getElementById(divPreviewId + "New");

                        if (newPreview == null) {

                            newPreview = document.createElement("div");

                            newPreview.setAttribute("id", divPreviewId + "New");

                            newPreview.style.width = document.getElementById(imgPreviewId).width + "px";

                            newPreview.style.height = document.getElementById(imgPreviewId).height + "px";

                            newPreview.style.border = "solid 1px #d2e2e2";

                        }

                        newPreview.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='" + document.selection.createRange().text + "')";

                        var tempDivPreview = document.getElementById(divPreviewId);

                        tempDivPreview.parentNode.insertBefore(newPreview, tempDivPreview);

                        tempDivPreview.style.display = "none";

                    }

                } else if (browserVersion.indexOf("FIREFOX") > -) {//firefox

                    var firefoxVersion = parseFloat(browserVersion.toLowerCase().match(/firefox\/([\d.]+)/)[]);

                    if (firefoxVersion < ) {//firefox7以下版本

                        document.getElementById(imgPreviewId).setAttribute("src", fileObj.files[].getAsDataURL());

                    } else {//firefox7.0+

                        document.getElementById(imgPreviewId).setAttribute("src", window.URL.createObjectURL(fileObj.files[]));

                    }

                } else {

                    document.getElementById(imgPreviewId).setAttribute("src", fileObj.value);

                }

            } else {

                alert("仅支持" + allowExtention + "为后缀名的文件!");

                fileObj.value = ""; //清空选中文件

                if (browserVersion.indexOf("MSIE") > -) {

                    fileObj.select();

                    document.selection.clear();

                }

                fileObj.outerHTML = fileObj.outerHTML;

            }

            return fileObj.value;    //返回路径

        }

    </script>

</body>

</html>

js本地图片预览，兼容ie[6-9]、火狐、Chrome17+、Opera11+、Maxthon3的更多相关文章

  1. 兼容ie[6-9]、火狐、Chrome、opera、maxthon3、360浏览器的js本地图片预览

    html代码: <div id="divPreview"> <img id="imgHeadPhoto" src="Images/H ...

  2. js本地图片预览代码兼容所有浏览器

    html代码 <div id="divPreview" style="width: 160px; height: 170px"><img id ...

  3. 浅谈js本地图片预览

    最近在工作中遇到一个问题,就是实现一个反馈页面,这个反馈页面的元素有反馈主题.反馈类型.反馈内容.反馈人联系电话以及反馈图片.前端将这些反馈的元素POST给后台提供的接口:实现这个工作的步骤就是:页面 ...

  4. js本地图片预览

    相信大家都遇到过上传图片之前预览,网上找了很多,但都不是所有浏览器都支持,不过后来找到一个,但自己没有完全实验. 代码如下: <script> //使用IE条件注释来判断是否IE6,通过判 ...

  5. Atitit. IE8.0 显示本地图片预览解决方案 img.src=本地图片路径无效的解决方案

    Atitit. IE8.0 显示本地图片预览解决方案 img.src=本地图片路径无效的解决方案 1. IE8.0 显示本地图片 img.src=本地图片路径无效的解决方案1 1.1. div来完成  ...

  6. 自定义type为file型input控件+该控件具有本地图片预览功能

    最近的一个项目需求是写一个type为filex型的input控件,这个控件: 第一,要自定义样式: 第二,要能直接在本地预览上传的图片: 第三,要能检测图片的尺寸是否符合要求. 故综合网上的资源写了下 ...

  7. 如何通过js实现图片预览功能

    一.效果预览 效果图: 二.实现代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  8. 原生JS实现图片预览功能

    html代码: <div class="album-new fr"> <div class="upload-btn btn-new container& ...

  9. JS实现图片预览与等比缩放

    案例仅为图片预览功能,省略图片上传步骤,框架为easyui. HTML代码: @*text-align:center;水平居中 vertical-align: middle;display: tabl ...

随机推荐

  1. 给你出道题：依次去掉离中心最远的M个点

    给定一个数组a[N],里面包含N个向量.现在要求进行删点操作,删点原则如下: 1.求出N个向量的中心O1,删除离O1最远的那个点 2.求出N-1个向量的中心O2,删除O2最远的那个点 ...... 重 ...

  2. pdb文件 PDB文件：每个开发人员都必须知道的 .NET PDB文件到底是什么？

    pdb文件包含了编译后程序指向源代码的位置信息,用于调试的时候定位到源代码,主要是用来方便调试的. 在程序发布为release模式时,建议将 pdb文件删除, 同时,对外发布的时候,也把 pdb删除, ...

  3. vue学习01

    vue学习01   1. 创建一个Vue实例官网-学习-教程-安装-(开发/生产版本)-与jQuery的引用相似 <!DOCTYPE html> <html> <head ...

  4. VC++字符串的使用及转换

    CString ,BSTR ,LPCTSTR之间关系和区别 CString是一个动态TCHAR数组,BSTR是一种专有格式的字符串(需要用系统提供的函数来操纵,LPCTSTR只是一个常量的TCHAR指 ...

  5. android语音识别方法

    http://www.apkbus.com/forum.php?mod=viewthread&tid=3473 android语音识别方法一:使用intent调用语音识别程序 1. 说明 以下 ...

  6. 乙醇的webdriver实用指南ruby版本

    webdriver实用指南是乙醇2013年分享计划的一部分,作为对已逝去的selenium2时代的追忆. 目录如下 启动浏览器 关闭浏览器 浏览器最大化 设置浏览器大小 访问链接 打印当前页面的tit ...

  7. Python 字典 values() 方法

    描述 Python 字典 values() 方法以列表形式(并非直接的列表,若要返回列表值还需调用list函数)返回字典中的所有值. 语法 values() 方法语法: D.values() 参数 无 ...

  8. Unityclient框架笔记二（组件实体开发模式的思考）

    Unity的Entity-Component-System实现的很美丽,很灵活.许多文章也对这样的组件实体的开发模式倍加推崇.由于它契合这么一条规则:优先使用组合而不是继承. 可是实际开发过程中,限制 ...

  9. mvn test 执行testng测试用例

    maven项目,把testng用例防止test目录下,配置pom.xml 文件如下,执行mvn test 能自动执行testng里面的用例 <project xmlns="http:/ ...

  10. JavaScript Interview Questions: Event Delegation and This

    David Posin helps you land that next programming position by understanding important JavaScript fund ...