<!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. Python websocket

    一.自己实现websocket 网上流传的都是Python2的websocket实现 # coding=utf8 # !/usr/bin/python import struct, socket im ...

  2. 有用的git片段

    世界上知识那么多,又岂是人力所能穷尽,于是术业有专攻.对于git,有用的命令片段其实非常少,而命令却是非常多.于是,掌握git常见的用法就足够了.不要在语句级别上记忆git命令,在代码片段级别上记忆g ...

  3. 2017年WorkApplication牛客网线上机试题

    WorkApplication是一家日企,主要办公地在东京.新加坡.上海等地. 第一题:n的全排列中有多少个排列逆序数为k 输入两个数字n,k,两个数字的范围都是[1,1000]. 输出:n的全排列中 ...

  4. go 学习 ---数据类型

    25个关键字 程序声明:import, package 程序实体声明和定义:chan, const, func, interface, map, struct, type, var 程序流程控制:go ...

  5. tomcat配置外部静态资源映射路径

    一.背景 1.有一个录音软件每天生成很多新的录音文件. 2.现在想通过一个WEB项目页面下载这些录音文件. 3.很显然这些录音文件放在WEB项目下不是很合适(WEB项目更新是个大麻烦,海量的录音文件要 ...

  6. OC 中new与alloc/init的差别

    英文具体解释:http://macresearch.org/difference-between-alloc-init-and-new 1.在实际开发中非常少会用到new.一般创建对象咱们看到的全是[ ...

  7. STM32F4—fsmc的配置步骤

    0:开启GPIO时钟和FSMC时钟 1:配置GPIO 2:配置片选控制寄存器 3:配置片选时序寄存器 4:配置写入时序寄存器 GPIO_InitTypeDef GPIO_InitStructure;/ ...

  8. node 服务器开发必备神器 —— nodemon

    nodemon 官方网站:http://nodemon.io/ github地址:https://github.com/remy/nodemon/ 简介:Nodemon 是一款非常实用的工具,用来监控 ...

  9. javascript array操作

    首先来看一下怎么判断一个对象是不是数组: 1.Array.isArray(obj) 调用数组的isArray方法 2.obj instanceof Array 判断对象是否是Array的实例 3.Ob ...

  10. Spring Cloud构建微服务架构（四）分布式配置中心（续）

    先来回顾一下,在前文中我们完成了什么: 构建了config-server,连接到Git仓库 在Git上创建了一个config-repo目录,用来存储配置信息 构建了config-client,来获取G ...