在 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>
分享到：
相关推荐
这个资源"2014-5-6更新 兼容ie[6-9]、火狐、Chrome、opera、maxthon3、360浏览器的js本地图片预览"提供了一个JavaScript解决方案，用于实现一个功能强大的本地图片预览功能，它能在多种主流浏览器中正常工作，包括...
在提供的“兼容ie678 and FF的本地图片预览.html”文件中，开发者可能采用了`<iframe>`或`ActiveXObject`来实现预览。`<iframe>`可以创建一个独立的浏览上下文，这样可以在不影响主页面的情况下加载和显示图片。而`...
标题中的“上传图片预览-兼容IE6，IE7，IE8，FF”指的是一个Web开发的技术解决方案，目的是实现图片上传前的预览功能，并确保该功能在早期版本的Internet Explorer（IE6、IE7、IE8）以及Firefox浏览器上都能正常工作...
标题中提到的“兼容ie6、ie7、ie8 和FF的本地上传图片预览”主要涉及以下技术点： 1. **FileReader API**：这是一个HTML5的新特性，用于读取文件。在支持的浏览器中，可以通过`FileReader.readAsDataURL(file)`方法...
由于早期的Internet Explorer（IE6, IE7, IE8）对现代Web标准的支持不足，而Firefox则采用了不同的实现方式，因此创建一个在这些浏览器上都能正常工作的图片上传预览功能并非易事。 图片上传预览功能是让用户在上传...
标题中的“整理 IE 7、8 预览本地图片和获取本地图片大小”涉及到的是在Internet Explorer 7和8这两个较旧版本的浏览器中，如何处理本地图片的预览和获取图片尺寸的问题。在早期的Web开发中，由于浏览器兼容性问题，...
为了解决IE8中图片上传预览失败的问题，本文将详细介绍一种通过使用`AlphaImageLoader`滤镜来实现图片预览的技术方案，并提供具体的实现代码及注意事项。 #### 解决方案的核心思路 本解决方案的核心在于利用IE特有...
2. **IE6-IE8的兼容策略**：由于这些老版本的IE不支持File API，我们需要使用ActiveX对象`new ActiveXObject("Scripting.FileSystemObject")`来读取本地文件。用户选择文件后，通过ActiveX对象获取文件内容，并利用`...
最近在Web项目开发过程中遇到的本地图片预览的需求，虽然最后因为其他原因没能使用，但是也算有些了解，整理出来。这里我们按浏览器分，主要包括IE6，IE7/8 和Firefox3， 不包含Opera，Safari和Chrome，这三个基本上...
图片上传预览的核心技术是HTML5的`FileReader`接口，但这个接口在IE6到IE9中并不支持。为了在这些旧版浏览器上实现类似的功能，开发者通常会利用`flash`或者`ActiveXObject`（针对IE）来读取和显示本地文件。在这个...
在IE6中，我们可以简单地通过改变`img`标签的`src`属性来实现本地图片预览，但IE7并不支持这种方式。为了解决这个问题，我们需要利用IE特有的滤镜技术，即`AlphaImageLoader`。 `AlphaImageLoader`是微软在IE中实现...
在ASP.NET环境中，针对Internet Explorer 6、7和8这三个早期版本实现图片上传前的预览...综上所述，要实现在ASP.NET中IE6、7、8浏览器上的图片上传预览，需要利用JavaScript和特定的IE滤镜技术，并确保兼容性和安全性。
总结起来，IE8本地图片上传预览的关键在于使用滤镜和`<div>`元素来规避浏览器的安全限制。而在现代浏览器中，我们可以利用更先进的FileReader API来实现相同的功能。这种差异性使得前端开发需要考虑到兼容性问题，...
关于js本地图片预览实现代码的知识点，我们可以从以下几个方面进行详细讲解： 1. 图片预览功能的重要性 图片预览功能是网页中常见的一项功能，允许用户在上传文件之前预览将要上传的图片，提高用户体验和界面友好性...
标题中的“图片预览(兼容FF,IE7)”指的是创建了一个功能，允许用户在浏览器上预览图片，这个功能同时支持Firefox（FF）和Internet Explorer 7（IE7）这两种浏览器。在早期的Web开发中，由于不同浏览器对某些技术的...
这个名为"vue组件js图片查看点击预览大图并下载高清大图到本地"的项目，是基于Vue 2.5.2版本实现的，它专注于为PC端用户提供图片预览和下载功能，但不支持IE浏览器。下面我们将详细探讨实现这些功能的关键知识点。 ...
ASP.NET 图片预览技术是Web开发中一个实用的功能，特别是在用户需要上传图片并即时查看效果的场景下。本文将详细讲解如何在ASP.NET环境中实现图片上传后的即时预览，以及考虑不同浏览器的兼容性问题。 首先，我们...