在 IE6 中,可以很方便地利用 img 的 src 属性,实现本地图片预览,然而在 IE7 中,这种办法却行不通。需要用 AlphaImageLoader。
--------------------------------------------------------------------------------
AlphaImageLoader
说明:
在对象容器边界内,在对象的背景和内容之间显示一张图片。并提供对此图片的剪切和改变尺寸的操作。如果载入的是PNG(Portable Network Graphics)格式,则0%-100%的透明度也被提供。
语法:
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )
enabled:可选项。布尔值(Boolean)。设置或检索滤镜是否激活。
true:默认值。滤镜激活。
false:滤镜被禁止。
sizingMethod:可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。
crop:剪切图片以适应对象尺寸。
image:默认值。增大或减小对象的尺寸边界以适应图片的尺寸。
scale:缩放图片以适应对象的尺寸边界。
src:必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数,滤镜将不会作用。
--------------------------------------------------------------------------------
具体操作:
为预览区域(比如要在某个 div 中预览)添加样式:filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);。
为 AlphaImageLoader 设置 src 属性。
<?xml version="1.0" encoding="gb2312"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>本地图片预览代码(支持 IE6、IE7)</title>
<style type="text/css">
#newPreview
{
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
}
</style>
<script type="text/javascript" language="javascript">
<!--
function PreviewImg(imgFile)
{
//原来的预览代码,不支持 IE7。
var oldPreview = document.getElementById("oldPreview");
oldPreview.innerHTML = "<img src=\"file:\\\\" + imgFile.value + "\" width=\"80\" height=\"60\" />";
//新的预览代码,支持 IE6、IE7。
var newPreview = document.getElementById("newPreview");
newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgFile.value;
newPreview.style.width = "80px";
newPreview.style.height = "60px";
}
-->
</script>
</head>
<body>
<p>说明:以下针对的是互联网情况,如果您在本地作测试,比如输入的地址是:http://127.0.0.1/...,则可以看到全部预览。</p>
<hr />
<p>如果您使用的是 IE6,则可以看到以下预览;如果您使用的是 IE7,则看不到以下预览。</p>
<div id="oldPreview"></div>
<hr />
<p>不论您使用的是 IE6 还是 IE7,均可以看到以下预览。</p>
<div id="newPreview"></div>
<hr />
<p>请选择一个图片进行预览:<input type="file" size="20" onchange="javascript:PreviewImg(this);" /></p>
</body>
</html>
分享到:
相关推荐
这是一个HTML兼容本地上传图片并预览的源代码,希望大家指正。
最近在Web项目开发过程中遇到的本地图片预览的需求,虽然最后因为其他原因没能使用,但是也算有些了解,整理出来。这里我们按浏览器分,主要包括IE6,IE7/8 和Firefox3, 不包含Opera,Safari和Chrome,这三个基本上...
ie8本地图片上传预览出现问题是因为限制浏览器造访本地文件,所以用到滤镜和div,下面有个不错的示例,希望对大家有所帮助
vue 2.5.2 版本 vue组件 实现点击预览大图功能,点击下载图片功能(不兼容IE,适用于PC端) 内部代码可实现点击图片旋转效果,在本处无用,故注释掉,如有需要可打开调整.
IE为了安全是不允许页面预览客户端本地图片的,也就是img元素的SRC是相对路径 不可能是绝对路径的 为了达成这一需求 需要使用滤镜
图片本地预览的代码,不是简单的显示而已,兼容IE,火狐,谷歌等浏览器,导入使用,可以根据要求修改!
图片上传预览是一种在图片上传之前对图片进行本地预览的技术。 使用户选择图片后能立即查看图片,而不需上传服务器,提高用户体验。...本实例通过JavaScript实现图片预览效果,代码很简单,可支持IE和火狐!
js加iframe轻松实现异步图片上传 可以预览 兼容FF,chrome,ie9
本文实例讲述了JavaScript实现图片本地预览功能。分享给大家供大家参考,具体如下: 实现一个在file文件域中选定图片文件之后,马上进行预览。不用预上传到服务器,整缩略图再打回前端用Ajax去预览的。直接利用...
效果图如下: 代码如下: 代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ... <head> <... charset=utf-8″ /> <...本地图片预览</title> <style type=”
//js本地图片预览,兼容ie[6-9]、火狐、Chrome17+、Opera11+、Maxthon3 function PreviewImage(fileObj) { //创建dom元素 var divPreviewId = 'divPreview_' + fileObj.name; var imgPreviewId = 'imgHeadPhoto_...
兼容IE6+、FF、Chrome浏览器。 使用说明: 1.首先页面需要引入jQuery库,然后引入uploadPreview.js,例如如下代码: [removed][removed] [removed][removed] 2.然后在HTML页面中需要一个文件域和一个预览图片的容器,通常...
一、图片上传实现本地预览 由于上传图片功能,现在大多数都需要在本地实现预览,为了能够更好的让用户体验到效果,实现成品的证明,需要兼容好几种浏览器,所有通过各个例子整合了这个例子插件,兼容火狐、谷歌、ie8...
本文实例为大家分享了js实现图片上传本地预览效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" ...
6)4.0版本支持IE 7.0,要摘录多个网页标签中的某一个网页的图片,只需将网页标签切换到该网页再摘录即可。 7)4.6修改了在IE工具栏不显示图标的问题 8)4.7增加了按序号保存图片功能。可以指定图片文件的前缀。 9)4.8...
我在IE8上试验下面这段代码,可以实现上述功能,没有在别的浏览器中测试,如果各位朋友知道多种浏览器的支持方法,请赐教,共同学习,谢谢。 <!DOCTYPE ...
本文实例介绍了基于JQUERY扩展,图片上传预览插件,目前兼容浏览器(IE 谷歌 火狐) 不支持safari,分享给大家供大家参考,具体内容如下 HTML代码: <html> <head> <title>图片上传预览演示</...