网上找了不少资料发现以下两个原因导致Firefox3,IE7,I8上传图片预览变得复杂
1，基于安全性Firefox3,IE7,IE8已无法直接通过 input[file] 的 value 属性获得本地文件完整路径
2，IE7,IE8用js将本地图片地址赋给img.src时无效
参考网上的一些朋友提供的解决办法整理出一份不算完美但凑合能用的代码
<!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=utf-8" />
<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的图片上传预览效果”这一问题，我们需要深入理解各种浏览器的特性和限制，熟练掌握ActiveX、Flash以及HTML5 File API的相关知识，并通过条件判断或特性检测来编写兼容的代码...
首先，IE6、IE7和IE8是微软Internet Explorer的早期版本，它们对于现代Web标准的支持非常有限，而火狐（Firefox）作为一款开源浏览器，虽然对新特性支持较好，但在旧版本中也可能存在一些差异。图片上传预览功能允许...
在网页开发中，兼容性问题始终是一个挑战，尤其是在处理老版本的Internet Explorer（IE）浏览器时，如IE6、IE7和IE8。这些浏览器在处理某些现代Web技术时存在局限，例如对CSS3、HTML5新特性以及JavaScript的一些高级...
例如ie7/ie8的滤镜预览法，firefox 3的getAsDataURL方法。 但在opera、safari和chrome还是没有办法实现本地预览，只能通过后台来支持预览。 在研究了各种预览方法后，作为总结，写了这个程序，跟大家一起分享。
标题中的“上传图片预览-兼容IE6，IE7，IE8，FF”指的是一个Web开发的技术解决方案，目的是实现图片上传前的预览功能，并确保该功能在早期版本的Internet Explorer（IE6、IE7、IE8）以及Firefox浏览器上都能正常工作...
解决了ie 7 8 火狐图片预览文件路径被过滤和文件图片原大小改变的解决方式
在JavaScript（简称JS）中实现图片预览，尤其是在兼容老版本的Internet Explorer（如IE6、IE7、IE8）以及Firefox（FF）等浏览器上，需要考虑多种技术策略和兼容性问题。下面我们将详细讨论如何实现这个功能，并着重...
对于“图片预览(支持IE7)”这个主题，我们主要关注的是如何在Internet Explorer 7（简称IE7）这种老版本浏览器中实现图片预览功能。由于IE7并不支持现代浏览器的一些特性，比如CSS3或HTML5的`<img>`标签的`srcset`...
在ASP（Active Server Pages）开发中，实现图片上传并预览功能是一项常见的需求，尤其在兼容多种浏览器，如IE7到IE11、火狐、谷歌、QQ浏览器和360浏览器时，需要考虑跨浏览器的兼容性问题。本文将详细讲解如何在这些...
虽然可以在ie6,ie7,火狐预览、但在谷歌浏览器还是不行、哪位高人要是有更好的办法浏览、能否交流交流. qq:253930407 email:ruanjingwang@yahoo.com.cn
标题中提到的“兼容ie6、ie7、ie8 和FF的本地上传图片预览”主要涉及以下技术点： 1. **FileReader API**：这是一个HTML5的新特性，用于读取文件。在支持的浏览器中，可以通过`FileReader.readAsDataURL(file)`方法...
jquery file上传预览本地图片支持IE6\7\8\9\10 chrome 火狐 网上有很多关于 file上传预览本地图片开源角本但都对支持到IE6\7\8，而且chrome 火狐最新版本也有问题，自己动手丰衣足食。分享给给大家。
本篇文章将详细探讨如何实现“图片上传预览”功能，并确保在IE 6/7/8及Firefox（包括新版）等浏览器中的兼容性。 首先，我们需要了解不同浏览器对HTML5新特性的支持情况。现代浏览器如Chrome、Safari和新版Firefox...
在本场景中，"ASP.NET 多图片上传 可预览 兼容火狐 IE"是一个功能实现，它允许用户在网页上一次性上传多张图片，并在上传前或上传过程中提供预览功能，同时确保该功能在不同浏览器，如火狐（Firefox）和IE（Internet...
本解决方案特别强调了对IE、Firefox和Chrome浏览器的支持，这涵盖了大部分用户常用的网络浏览器。 在线预览PDF的技术实现主要基于以下几个关键点： 1. **PDF.js**：这是一个由Mozilla开发的开源库，它允许在Web...
本文将深入探讨如何使用jQuery实现一个简洁版的图片上传预览功能，这个功能可以兼容包括IE和Firefox在内的多种浏览器。 首先，我们需要理解图片预览的基本原理。在用户选择文件之前，我们无法直接预览图片。但是，...
兼容ie[6-9]、火狐、Chrome、opera、maxthon3、360浏览器的js本地图片预览"提供了一个JavaScript解决方案，用于实现一个功能强大的本地图片预览功能，它能在多种主流浏览器中正常工作，包括古老的Internet Explorer ...
本文将深入探讨如何实现一个兼容火狐（Firefox）和IE（Internet Explorer）浏览器的JS图片预览功能，同时也会涉及到源码分析和相关工具的使用。 一、基本原理 图片预览的核心是利用HTML的`<img>`标签和`window.URL....