<?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>
说明：以下针对的是互联网情况，如果您在本地作测试，比如输入的地址是：http://127.0.0.1/...，则可以看到全部预览。
<hr />
如果您使用的是 IE6，则可以看到以下预览；如果您使用的是 IE7，则看不到以下预览。
<div id="oldPreview"></div>
<hr />
不论您使用的是 IE6 还是 IE7，均可以看到以下预览。
<div id="newPreview"></div>
<hr />
请选择一个图片进行预览：<input type="file" size="20" onchange="javascript:PreviewImg(this);" />
</body>
</html>
分享到：
相关推荐
在JSP（JavaServer Pages）中，显示本地图片预览是一项常见的需求，特别是在网页开发中。JSP是一种基于Java的动态网页技术，它允许开发者在HTML、XML或其他标记语言中嵌入Java代码，以实现服务器端的数据处理和动态...
这个资源"2014-5-6更新 兼容ie[6-9]、火狐、Chrome、opera、maxthon3、360浏览器的js本地图片预览"提供了一个JavaScript解决方案，用于实现一个功能强大的本地图片预览功能，它能在多种主流浏览器中正常工作，包括...
### tinyMCE本地图片预览实现详解 #### 一、简介 tinyMCE是一款非常流行的开源富文本编辑器，广泛应用于各种网站和应用程序中。它提供了丰富的文本编辑功能，包括但不限于格式化文本、插入图像、链接等。在某些...
本地图片预览 html+js 本地 图片 预览 html+js 不需要上传 预览
通过以上技术，我们可以构建一个功能完善的本地图片预览系统，既满足了用户在上传前查看图片的需求，又提供了良好的交互体验。HTML5的这些新特性不仅简化了开发流程，也为Web应用带来了更多可能性。
标题中的“本地图片预览代码（支持 IE6、IE7）”指的是在网页中实现一个功能，让用户可以预览本地的图片，同时这个功能需要兼容古老的Internet Explorer浏览器，特别是版本6和7。在Web开发中，由于IE6和IE7对现代Web...
Firefox3,IE6,IE7,IE8上传本地图片预览
首先，本地图片预览功能的核心在于读取用户选择的文件，并在不实际上传的情况下在浏览器中显示。在HTML5中，File API提供了一个这样的机制，允许我们访问和操作用户选取的文件。在jQuery插件中，我们可以利用这些API...
关于js本地图片预览实现代码的知识点，我们可以从以下几个方面进行详细讲解： 1. 图片预览功能的重要性 图片预览功能是网页中常见的一项功能，允许用户在上传文件之前预览将要上传的图片，提高用户体验和界面友好性...
在选择本地图片文件并确定后，生成预览。同时，会对选择的图片格式进行过滤，如果不是图片格式的文件，会显示提示信息。
通过以上知识点，结合提供的`UploadImage`项目源码，你可以实现完整的本地图片预览和上传功能。请参考项目文档或博文链接（https://alisdame.iteye.com/blog/2163940）获取更详细的信息和示例代码。
对于本地图片预览，JavaScript主要负责处理文件输入、DOM操作以及图像显示。 1. **文件输入**：在HTML5中，`<input type="file">`元素提供了一个选择本地文件的接口。通过添加`accept`属性，我们可以限制用户只能...
在JavaScript中处理浏览器的本地图片预览功能时，尤其是在旧版的Internet Explorer（如IE7）中，开发者会遇到一些挑战。在IE6中，我们可以简单地通过改变`img`标签的`src`属性来实现本地图片预览，但IE7并不支持这种...
JavaScript实现本地图片预览是一项在网页中常见的功能，它允许用户在不上传图片到服务器的情况下，直接在客户端浏览器中查看选定的本地图片。这个功能在文件上传组件中非常实用，可以提高用户体验，避免了用户上传后...
本文详细介绍了使用createObjectURL方法实现本地图片预览的原理和步骤，以下是详细的知识点梳理： ### 1. createObjectURL方法介绍 createObjectURL是一个浏览器提供的API，它能够创建一个指向特定File对象或Blob...
总之，纯JavaScript实现本地图片预览是一个高效、兼容性好的技术方案，它不仅提高了用户的交互体验，还能满足多种复杂的业务需求。随着前端技术的发展和浏览器能力的增强，这种方法将会有更广泛的应用前景。
在对象容器边界内，在对象的背景和内容之间显示一张图片。并提供对此图片的剪切和改变尺寸的操作。如果载入的是PNG(Portable Network Graphics)格式，则0%-100%的透明度也被提供。
以上是关于本地图片预览和客户端文件验证的基本原理和实现步骤。实际应用中，还需要考虑浏览器兼容性、性能优化、用户体验等因素，确保功能的稳定性和易用性。如果你需要具体的代码示例，可以参考提供的博文链接或...