<!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. Lucene使用与优化（转）

    原文链接:http://blog.csdn.net/hongfu_/article/details/1933346 本文所使用的Lucene版本较低,年代久远,许多API可能已经变了. 1 lucen ...

  2. iOS10 推送必看 UNNotificationContentExtension

    来源:徐不同(@2016徐小爷) 链接:http://www.jianshu.com/p/45933f5450a4 大伙久等啦~这绝对是最全最详细的 UNNotificationContentExte ...

  3. SSL原理

    http://blog.csdn.net/terryzero/article/details/5921791SSL的原理以前一直很模糊,看了下面这篇文章后清楚了许多,为了方便以后的回顾,所以转载下 R ...

  4. 利用HttpWebRequest模拟表单提交 JQuery 的一个轻量级 Guid 字符串拓展插件. 轻量级Config文件AppSettings节点编辑帮助类

    利用HttpWebRequest模拟表单提交   1 using System; 2 using System.Collections.Specialized; 3 using System.IO; ...

  5. OGG_GoldenGate数据库配置DDL同步（案例）

    2014-03-08 Created By BaoXinjian

  6. Bridge - 桥接模式

    1. 概述 在软件系统中,某些类型由于自身的逻辑,它具有两个或多个维度的变化,那么如何应对这种“多维度的变化”?如何利用面向对象的技术来使得该类型能够轻松的沿着多个方向进行变化,而又不引入额外的复杂度 ...

  7. Python 列表 reverse() 方法

    描述 Python 列表 reverse() 方法对列表中的元素进行反向排序. 语法 reverse() 方法语法: L.reverse() 参数 无. 返回值 该方法没有返回值,但是会对列表的元素进 ...

  8. ICDAR2017 Competition on Reading Chinese Text in the Wild(RCTW-17) 介绍

    阅读文章:<ICDAR2017 Competition on Reading Chinese Text in the Wild(RCTW-17)> 这篇文章是对一项中文检测和识别比赛项目( ...

  9. win10环境配置react

    1 react 需要nodejs所以需要安装nodejs环境,到nodejs官网下载 现在默认会安装nodejs 和 npm包 和 配置环境 2 检查是否安装成功,在命令行中输入 显示成功则正确 3 ...

  10. 页面返回刷新或H5监听(手机的)返回键

    1. pushHistory(); window.addEventListener("popstate", function(e) { alert("我监听到了浏览器的返 ...