<!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. bootstrap Validators

    地址:http://reactiveraven.github.io/jqBootstrapValidation/

  2. Python学习笔记015——readline与readlines的区别

    示例1 读取同样一个文件binary_read_1.txt. 春眠不觉晓,处处闻啼鸟. 夜来风雨声,花落知多少. 其中该文件内容被下段代码读出(注意,这里是采用的readlines) f = open ...

  3. oracle导表小结

    事件描述:从A主机oracle服务器导出.sql文件到B主机,发现1.导入存在乱码 2.提示USERS表空没有权限(A B主机均为window系统) 1.针对第一点乱码 首先确认系统的默认字符编码GB ...

  4. 转： javascript动态添加、修改、删除对象的属性和方法

    在其他语言中,对象一旦生成,就不可更改了,要为一个对象添加修改成员必须要在对应的类中修改,并重新实例化,而且程序必须经过重新编译.JavaScript 中却非如此,它提供了灵活的机制来修改对象的行为, ...

  5. LevelDB场景分析4--BackgroundCompaction

    1.DBImpl::Open      uint64_t new_log_number = impl->versions_->NewFileNumber();      WritableF ...

  6. TCP/IP协议栈与数据报封装

    一.ISO/OSI参考模型 OSI(open system interconnection)开放系统互联模型是由ISO(International Organization for Standardi ...

  7. Axure多人协作

    这几天搞<材料採购系统>需求.我们组须要分模块画模型图,可是假设每一个人各自画各自的,最后整合,这样就太麻烦了.小左说Axure能够实现多人协作,于是我就研究了一下.我们组已经在用了.以下 ...

  8. es6 解构赋值 新认知/新习惯

    es6 的解构赋值其实很早就学习了,但一直纠结于习惯和可读性问题,所以没有大规模使用.最近被 react调教一番之后.已经完全融入认知和习惯中去了.总结一下三个常用的技巧: 对象取值 取值并重命名 剩 ...

  9. appium +uiautomator2 遇到 deviceName can't be blank 提示的解决

    为了获取android toast ,需要升级selenium 到 3.4.0 和appium 5.0.0-BETA9 到最新版本,并在启动代码前面追加一行代码: capabilities.setCa ...

  10. [Jobdu] 题目1545：奇怪的连通图

    题目描述: 已知一个无向带权图,求最小整数k.使仅使用权值小于等于k的边,节点1可以与节点n连通. 输入: 输入包含多组测试用例,每组测试用例的开头为一个整数n(1 <= n <= 100 ...