<!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>
<title>Firefox3,IE6,IE7,IE8上传图片预览</title>
<style type="text/css">
#preview_wrapper{
display:inline-block;
width:300px;
height:300px;
background-color:#CCC;
}
#preview_fake{
/* 该对象用于在IE下显示预览图片
*/
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
}
#preview_size_fake{
/* 该对象只用来在IE下获得图片的原始尺寸，无其它用途
*/
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);
visibility:hidden;
}
#preview{
/* 该对象用于在FF下显示预览图片
*/
width:300px;
height:300px;
}
</style>
<script type="text/javascript">
function onUploadImgChange(sender){
if( !sender.value.match(/.jpg|.gif|.png|.bmp/i)){
alert('图片格式无效！');
return false;
}
var objPreview = document.getElementById('preview' );
var objPreviewFake = document.getElementById('preview_fake' );
var objPreviewSizeFake = document.getElementById('preview_size_fake' );
if( sender.files &&sender.files[0] ){
objPreview.style.display ='block';
objPreview.style.width ='auto';
objPreview.style.height ='auto';
// Firefox 因安全性问题已无法直接通过input[file].value
objPreview.src =sender.files[0].getAsDataURL();
}
else if( objPreviewFake.filters){
// IE7,IE8 在设置本地图片地址为 img.src 时出现莫名其妙的后果
//（相同环境有时能显示，有时不显示），因此只能用滤镜来解决
// IE7, IE8因安全性问题已无法直接通过 input[file].value 获取完整的文件路径
sender.select();
var imgSrc =document.selection.createRange().text;
objPreviewFake.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src= imgSrc;
objPreviewSizeFake.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src= imgSrc;
autoSizePreview( objPreviewFake,objPreviewSizeFake.offsetWidth,objPreviewSizeFake.offsetHeight );
objPreview.style.display ='none';
}
}
function onPreviewLoad(sender)
{autoSizePreview(sender,sender.offsetWidth, sender.offsetHeight );}
function autoSizePreview( objPre, originalWidth, originalHeight){
var zoomParam = clacImgZoomParam( 300, 300, originalWidth,originalHeight);
objPre.style.width = zoomParam.width +'px';
objPre.style.height = zoomParam.height +'px';
objPre.style.marginTop = zoomParam.top +'px';
objPre.style.marginLeft = zoomParam.left + 'px';
}
function clacImgZoomParam( maxWidth, maxHeight, width, height ){
var param = { width:width, height:height, top:0, left:0 };
if(width>maxWidth || height>maxHeight ){
rateWidth = width /maxWidth;
rateHeight = height /maxHeight;
if( rateWidth > rateHeight){
param.width =maxWidth;
param.height = height /rateWidth;
}else{
param.width = width /rateHeight;
param.height =maxHeight;
}
}
param.left = (maxWidth - param.width) / 2;
param.top = (maxHeight - param.height) /2;
return param;
}
</script>
</head>
<body>
<div id="preview_wrapper">
<div id="preview_fake">
<img id="preview" onload="onPreviewLoad(this)"/>
</div>
</div>
<br/>
<input id="upload_img" type="file" onchange="onUploadImgChange(this)"/>
<br/>
<img id="preview_size_fake"/>
</body>
</html>
分享到：
相关推荐
Firefox3,IE6,IE7,IE8上传本地图片预览
标题提到的"兼容IE6,IE7,IE8和Firefox的图片上传预览效果"直指浏览器兼容性问题，这是一个在过去很长一段时间内困扰开发者的关键挑战。由于早期的Internet Explorer（IE6, IE7, IE8）对现代Web标准的支持不足，而...
在网页开发中，兼容性问题始终是一个挑战，尤其是在处理老版本的Internet Explorer（IE）浏览器时，如IE6、IE7和IE8。这些浏览器在处理某些现代Web技术时存在局限，例如对CSS3、HTML5新特性以及JavaScript的一些高级...
首先，IE6、IE7和IE8是微软Internet Explorer的早期版本，它们对于现代Web标准的支持非常有限，而火狐（Firefox）作为一款开源浏览器，虽然对新特性支持较好，但在旧版本中也可能存在一些差异。图片上传预览功能允许...
在JavaScript（简称JS）中实现图片预览，尤其是在兼容老版本的Internet Explorer（如IE6、IE7、IE8）以及Firefox（FF）等浏览器上，需要考虑多种技术策略和兼容性问题。下面我们将详细讨论如何实现这个功能，并着重...
标题中的“上传图片预览-兼容IE6，IE7，IE8，FF”指的是一个Web开发的技术解决方案，目的是实现图片上传前的预览功能，并确保该功能在早期版本的Internet Explorer（IE6、IE7、IE8）以及Firefox浏览器上都能正常工作...
虽然可以在ie6,ie7,火狐预览、但在谷歌浏览器还是不行、哪位高人要是有更好的办法浏览、能否交流交流. qq:253930407 email:ruanjingwang@yahoo.com.cn
jquery file上传预览本地图片支持IE6\7\8\9\10 chrome 火狐 网上有很多关于 file上传预览本地图片开源角本但都对支持到IE6\7\8，而且chrome 火狐最新版本也有问题，自己动手丰衣足食。分享给给大家。
例如ie7/ie8的滤镜预览法，firefox 3的getAsDataURL方法。 但在opera、safari和chrome还是没有办法实现本地预览，只能通过后台来支持预览。 在研究了各种预览方法后，作为总结，写了这个程序，跟大家一起分享。
标题中提到的“兼容ie6、ie7、ie8 和FF的本地上传图片预览”主要涉及以下技术点： 1. **FileReader API**：这是一个HTML5的新特性，用于读取文件。在支持的浏览器中，可以通过`FileReader.readAsDataURL(file)`方法...
对于“图片预览(支持IE7)”这个主题，我们主要关注的是如何在Internet Explorer 7（简称IE7）这种老版本浏览器中实现图片预览功能。由于IE7并不支持现代浏览器的一些特性，比如CSS3或HTML5的`<img>`标签的`srcset`...
本篇文章将详细探讨如何实现“图片上传预览”功能，并确保在IE 6/7/8及Firefox（包括新版）等浏览器中的兼容性。 首先，我们需要了解不同浏览器对HTML5新特性的支持情况。现代浏览器如Chrome、Safari和新版Firefox...
兼容ie[6-9]、火狐、Chrome、opera、maxthon3、360浏览器的js本地图片预览"提供了一个JavaScript解决方案，用于实现一个功能强大的本地图片预览功能，它能在多种主流浏览器中正常工作，包括古老的Internet Explorer ...
在ASP（Active Server Pages）开发中，实现图片上传并预览功能是一项常见的需求，尤其在兼容多种浏览器，如IE7到IE11、火狐、谷歌、QQ浏览器和360浏览器时，需要考虑跨浏览器的兼容性问题。本文将详细讲解如何在这些...
- 如果支持`files`属性（如Firefox等现代浏览器），`imgObjPreview.src`被设置为`docObj.files[0].getAsDataURL()`，这将创建一个基于文件内容的Base64编码的URL，用以显示图片预览。 - 对于不支持`files`属性的...
// 新的预览代码，支持IE6、IE7,IE8也支持，firefox不支持！ var newPreview = document.getElementById("newPreview"); newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgFile...
6. **浏览器兼容性**：针对IE、Firefox和Chrome等不同浏览器，可能需要针对其特性进行特定的代码优化和适配。例如，对于IE，可能需要使用条件注释或polyfill来兼容旧版本的JavaScript API。 7. **响应式设计**：...
在本场景中，"ASP.NET 多图片上传 可预览 兼容火狐 IE"是一个功能实现，它允许用户在网页上一次性上传多张图片，并在上传前或上传过程中提供预览功能，同时确保该功能在不同浏览器，如火狐（Firefox）和IE（Internet...
本文将深入探讨如何使用jQuery实现一个简洁版的图片上传预览功能，这个功能可以兼容包括IE和Firefox在内的多种浏览器。 首先，我们需要理解图片预览的基本原理。在用户选择文件之前，我们无法直接预览图片。但是，...