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

本文主要是介绍兼容ie[6-9]、火狐、Chrome、opera、maxthon3、360浏览器的js本地图片预览,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

html代码

<div id="divPreview">
     <img id="imgHeadPhoto" src="Images/Headphoto/noperson.jpg" style="width: 160px; height: 170px;border: solid 1px #d2e2e2;" alt="" />
</div>
<asp:FileUpload ID="fuHeadPhoto" runat="server" οnchange="PreviewImage(this,'imgHeadPhoto','divPreview')" size="20" />

将网上的js本地图片预览整合了一下,希望对大家有用,如有其他浏览器不兼容且有解决办法,请给我留言,我将及时更新本文代码。

 

javascript代码

复制代码
//js本地图片预览,兼容ie[6-9]、火狐、Chrome17+、Opera11+、Maxthon3、360浏览器
function PreviewImage(fileObj, imgPreviewId, divPreviewId) {var allowExtention = document.getElementById("hfAllowPicSuffix").value; //.jpg,.bmp,.gif,.png,允许上传文件的后缀名var extention = fileObj.value.substring(fileObj.value.lastIndexOf(".") + 1).toLowerCase(); //获取当前上传文件的扩展名var browserVersion = window.navigator.userAgent.toUpperCase();if (allowExtention.indexOf(extention) > -1) {if (fileObj.files) {//兼容chrome、火狐7+、360浏览器5.5+等,应该也兼容ie10,HTML5实现预览if (window.FileReader) {var reader = new FileReader();reader.onload = function(e) {document.getElementById(imgPreviewId).setAttribute("src", e.target.result);}reader.readAsDataURL(fileObj.files[0]);} else if (browserVersion.indexOf("SAFARI") > -1) {alert("不支持Safari浏览器6.0以下版本的图片预览!");} else {alert("不支持您当前使用的浏览器的图片预览!");}} else if (browserVersion.indexOf("MSIE") > -1) {//ie、360低版本预览if (browserVersion.indexOf("MSIE 6") > -1) {//ie6document.getElementById(imgPreviewId).setAttribute("src", fileObj.value);} else {//ie[7-9]
                fileObj.select();if (browserVersion.indexOf("MSIE 9") > -1) {//fileObj.blur(); //不加上document.selection.createRange().text在ie9会拒绝访问document.getElementById(divPreviewId).focus(); //参考http://gallop-liu.iteye.com/blog/1344778
                }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") > -1) {//firefoxvar firefoxVersion = parseFloat(browserVersion.toLowerCase().match(/firefox\/([\d.]+)/)[1]);if (firefoxVersion < 7) {//firefox7以下版本document.getElementById(imgPreviewId).setAttribute("src", fileObj.files[0].getAsDataURL());} else {//firefox7.0+                    document.getElementById(imgPreviewId).setAttribute("src", window.URL.createObjectURL(fileObj.files[0]));}} else {alert("不支持您当前使用的浏览器的图片预览!");}} else {alert("仅支持" + allowExtention + "为后缀名的文件!");fileObj.value = ""; //清空选中文件if (browserVersion.indexOf("MSIE") > -1) {fileObj.select();document.selection.clear();}fileObj.outerHTML = fileObj.outerHTML;}
}
复制代码

 

测试代码下载 测试代码js未更新,测试时将本页js复制到测试代码里面

 2013-7-2
1.更新原来newPreview.style.width =document.getElementById(imgPreviewId).style.width为document.getElementById(imgPreviewId).width+"px";

2013-7-4

1.更新兼容ie9浏览器、兼容360浏览器5.5+

 2014-4-11

1.修复上传到服务器上后,特殊情况下ie9还是拒绝访问问题问题。

fileObj.blur();修改为document.getElementById(divPreviewId).focus();

这篇关于兼容ie[6-9]、火狐、Chrome、opera、maxthon3、360浏览器的js本地图片预览的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1081142

相关文章

Python实现精准提取 PDF中的文本,表格与图片

《Python实现精准提取PDF中的文本,表格与图片》在实际的系统开发中,处理PDF文件不仅限于读取整页文本,还有提取文档中的表格数据,图片或特定区域的内容,下面我们来看看如何使用Python实... 目录安装 python 库提取 PDF 文本内容:获取整页文本与指定区域内容获取页面上的所有文本内容获取

Java使用HttpClient实现图片下载与本地保存功能

《Java使用HttpClient实现图片下载与本地保存功能》在当今数字化时代,网络资源的获取与处理已成为软件开发中的常见需求,其中,图片作为网络上最常见的资源之一,其下载与保存功能在许多应用场景中都... 目录引言一、Apache HttpClient简介二、技术栈与环境准备三、实现图片下载与保存功能1.

Python基于微信OCR引擎实现高效图片文字识别

《Python基于微信OCR引擎实现高效图片文字识别》这篇文章主要为大家详细介绍了一款基于微信OCR引擎的图片文字识别桌面应用开发全过程,可以实现从图片拖拽识别到文字提取,感兴趣的小伙伴可以跟随小编一... 目录一、项目概述1.1 开发背景1.2 技术选型1.3 核心优势二、功能详解2.1 核心功能模块2.

Go语言如何判断两张图片的相似度

《Go语言如何判断两张图片的相似度》这篇文章主要为大家详细介绍了Go语言如何中实现判断两张图片的相似度的两种方法,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 在介绍技术细节前,我们先来看看图片对比在哪些场景下可以用得到:图片去重:自动删除重复图片,为存储空间"瘦身"。想象你是一个

使用Python实现base64字符串与图片互转的详细步骤

《使用Python实现base64字符串与图片互转的详细步骤》要将一个Base64编码的字符串转换为图片文件并保存下来,可以使用Python的base64模块来实现,这一过程包括解码Base64字符串... 目录1. 图片编码为 Base64 字符串2. Base64 字符串解码为图片文件3. 示例使用注意

c/c++的opencv实现图片膨胀

《c/c++的opencv实现图片膨胀》图像膨胀是形态学操作,通过结构元素扩张亮区填充孔洞、连接断开部分、加粗物体,OpenCV的cv::dilate函数实现该操作,本文就来介绍一下opencv图片... 目录什么是图像膨胀?结构元素 (KerChina编程nel)OpenCV 中的 cv::dilate() 函

Java实现本地缓存的常用方案介绍

《Java实现本地缓存的常用方案介绍》本地缓存的代表技术主要有HashMap,GuavaCache,Caffeine和Encahche,这篇文章主要来和大家聊聊java利用这些技术分别实现本地缓存的方... 目录本地缓存实现方式HashMapConcurrentHashMapGuava CacheCaffe

使用Python获取JS加载的数据的多种实现方法

《使用Python获取JS加载的数据的多种实现方法》在当今的互联网时代,网页数据的动态加载已经成为一种常见的技术手段,许多现代网站通过JavaScript(JS)动态加载内容,这使得传统的静态网页爬取... 目录引言一、动态 网页与js加载数据的原理二、python爬取JS加载数据的方法(一)分析网络请求1

如何关闭Mac的Safari通知? 3招教你关闭Safari浏览器网站通知的技巧

《如何关闭Mac的Safari通知?3招教你关闭Safari浏览器网站通知的技巧》当我们在使用Mac电脑专注做一件事情的时候,总是会被一些消息推送通知所打扰,这时候,我们就希望关闭这些烦人的Mac通... Safari 浏览器的「通知」功能本意是为了方便用户及时获取最新资讯,但很容易被一些网站滥用,导致我们

Maven项目打包时添加本地Jar包的操作步骤

《Maven项目打包时添加本地Jar包的操作步骤》在Maven项目开发中,我们经常会遇到需要引入本地Jar包的场景,比如使用未发布到中央仓库的第三方库或者处理版本冲突的依赖项,本文将详细介绍如何通过M... 目录一、适用场景说明​二、核心操作命令​1. 命令格式解析​2. 实战案例演示​三、项目配置步骤​1