在 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 地址指定背景图像。假如忽略此參数，滤镜将不会作用。

详细操作：

  1. 为预览区域（比方要在某个 div 中预览）加入样式：filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);。
  2. 为 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>

AlphaImageLoader用法的更多相关文章

  1. Before和After用法小结

    Before和After用法小结 定义 :before 选择器在被选元素的内容前面插入内容.:after选择器在被选元素的内容后面插入内容.(注:必须包含content 属性) 一.特性:不能左右:e ...

  2. Iframe 用法的详细讲解

    1转自:https://blog.csdn.net/judyge/article/details/51786064 zIframe 用法的详细讲解 把iframe解释成“浏览器中的浏览器“很是恰当 & ...

  3. EditText 基本用法

    title: EditText 基本用法 tags: EditText,编辑框,输入框 --- EditText介绍: EditText 在开发中也是经常用到的控件,也是一个比较必要的组件,可以说它是 ...

  4. jquery插件的用法之cookie 插件

    一．使用cookie 插件 插件官方网站下载地址:http://plugins.jquery.com/cookie/ cookie 插件的用法比较简单,直接粘贴下面代码示例: //生成一个cookie ...

  5. Java中的Socket的用法

                                   Java中的Socket的用法 Java中的Socket分为普通的Socket和NioSocket. 普通Socket的用法 Java中的 ...

  6. [转载]C#中MessageBox.Show用法以及VB.NET中MsgBox用法

    一.C#中MessageBox.Show用法 MessageBox.Show (String) 显示具有指定文本的消息框. 由 .NET Compact Framework 支持. MessageBo ...

  7. python enumerate 用法

    A new built-in function, enumerate() , will make certain loops a bit clearer. enumerate(thing) , whe ...

  8. [转载]Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结

    本文对Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法进行了详细的总结,需要的朋友可以参考下,希望对大家有所帮助. 详细解读Jquery各Ajax函数: ...

  9. 【JavaScript】innerHTML、innerText和outerHTML的用法区别

    用法: <div id="test">   <span style="color:red">test1</span> tes ...

随机推荐

  1. 开源课程管理系统（CMS）：Moodle

    开源课程管理系统(CMS):Moodle 一.总结 1.php开发的cms,可借鉴参考用 二.Moodle(百度) Moodle(Modular Object-Oriented Dynamic Lea ...

  2. 原生js大总结十一

    101.请简述prototype.__proto__ constructor三者的关系   1.prototype:     每一个函数都有一个prototype这个属性,而这个属性指向一个对象,这个 ...

  3. 下次自己主动登录（记住password）功能

    1:进入cookie插件 <script src="jquery.cookie.js" type="text/javascript"></sc ...

  4. amazeui学习笔记--css（常用组件9）--导航nav

    amazeui学习笔记--css(常用组件9)--导航nav 一.总结 1.导航基本使用:<ul> 添加 .am-nav class 以后就是一个基本的垂直导航.默认样式中并没有限定导航的 ...

  5. Costura.Fody

    使用Costura.Fody将源DLL合并到目标EXE 本文为原创文章,如转载,请在网页明显位置标明原文名称.作者及网址,谢谢! 一.本文主要是使用Costura.Fody工具将源DLL合并到目标EX ...

  6. Javascript和jquery事件--双击事件

    在js中和jq中对应的命名都为dblclick,ondblclick,但是ondblclick和dom元素的属性相似,可以在行内设置,也可以使用attr设置. 同时,双击事件需要关注一个问题,那就是双 ...

  7. [D3] Start Visualizing Data Driven Documents with D3 v4

    It’s time to live up to D3’s true name and potential by integrating some real data into your visuali ...

  8. Datasets for MachineLearning

    Public datasets for machine learning  http://homepages.inf.ed.ac.uk/rbf/IAPR/researchers/MLPAGES/mld ...

  9. Linux_Shell初级编程入门

    从程序员的角度来看, Shell本身是一种用C语言编写的程序,从用户的角度来看,Shell是用户与Linux操作系统沟通的桥梁.用户既可以输入命令执行,又可以利用 Shell脚本编程,完成更加复杂的操 ...

  10. 过滤input框中的特殊字符

    两种方式,我觉得是一样的效果,请看: var charFilter1 = function(str) { var pattern = new RegExp("[`~!@#$^&*() ...