`
android_learner
  • 浏览: 7527 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

Firefox3,IE6,IE7,IE8上传图片预览

阅读更多
Javascript:
Firefox3,IE6,IE7,IE8上传图片预览,这是一个比较实用的功能,暂时记录下来,以供参考:
<!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上传本地图片预览

    Firefox3,IE6,IE7,IE8上传本地图片预览

    兼容IE6,IE7,IE8和Firefox的图片上传预览效果

    标题提到的"兼容IE6,IE7,IE8和Firefox的图片上传预览效果"直指浏览器兼容性问题,这是一个在过去很长一段时间内困扰开发者的关键挑战。由于早期的Internet Explorer(IE6, IE7, IE8)对现代Web标准的支持不足,而...

    ie6,ie7,ie8和firefox下兼容的图片上传预览

    在网页开发中,兼容性问题始终是一个挑战,尤其是在处理老版本的Internet Explorer(IE)浏览器时,如IE6、IE7和IE8。这些浏览器在处理某些现代Web技术时存在局限,例如对CSS3、HTML5新特性以及JavaScript的一些高级...

    IE6,Ie7,ie8 ,和火狐下的图片上传预览 解决方案

    首先,IE6、IE7和IE8是微软Internet Explorer的早期版本,它们对于现代Web标准的支持非常有限,而火狐(Firefox)作为一款开源浏览器,虽然对新特性支持较好,但在旧版本中也可能存在一些差异。图片上传预览功能允许...

    JS图片预览(兼容IE6、IE7、IE8和FF)

    在JavaScript(简称JS)中实现图片预览,尤其是在兼容老版本的Internet Explorer(如IE6、IE7、IE8)以及Firefox(FF)等浏览器上,需要考虑多种技术策略和兼容性问题。下面我们将详细讨论如何实现这个功能,并着重...

    上传图片预览-兼容IE6,IE7,IE8,FF

    标题中的“上传图片预览-兼容IE6,IE7,IE8,FF”指的是一个Web开发的技术解决方案,目的是实现图片上传前的预览功能,并确保该功能在早期版本的Internet Explorer(IE6、IE7、IE8)以及Firefox浏览器上都能正常工作...

    图片上传预览 兼容ie6 ,ie7 ,火狐3.0

    虽然可以在ie6,ie7,火狐预览、但在谷歌浏览器还是不行、哪位高人要是有更好的办法浏览、能否交流交流. qq:253930407 email:ruanjingwang@yahoo.com.cn

    jquery file上传预览本地图片支持IE6\7\8\9\10 chrome 火狐

    jquery file上传预览本地图片支持IE6\7\8\9\10 chrome 火狐 网上有很多关于 file上传预览本地图片开源角本但都对支持到IE6\7\8,而且chrome 火狐最新版本也有问题,自己动手丰衣足食。分享给给大家。

    JavaScript 图片上传预览效果(支持ie7/ie8,firefox 3.55)

    例如ie7/ie8的滤镜预览法,firefox 3的getAsDataURL方法。 但在opera、safari和chrome还是没有办法实现本地预览,只能通过后台来支持预览。 在研究了各种预览方法后,作为总结,写了这个程序,跟大家一起分享。

    兼容ie6、ie7、ie8 和FF的本地上传图片预览

    标题中提到的“兼容ie6、ie7、ie8 和FF的本地上传图片预览”主要涉及以下技术点: 1. **FileReader API**:这是一个HTML5的新特性,用于读取文件。在支持的浏览器中,可以通过`FileReader.readAsDataURL(file)`方法...

    图片预览(支持IE7)

    对于“图片预览(支持IE7)”这个主题,我们主要关注的是如何在Internet Explorer 7(简称IE7)这种老版本浏览器中实现图片预览功能。由于IE7并不支持现代浏览器的一些特性,比如CSS3或HTML5的`&lt;img&gt;`标签的`srcset`...

    图片上传 预览 兼容 IE firefox

    本篇文章将详细探讨如何实现“图片上传预览”功能,并确保在IE 6/7/8及Firefox(包括新版)等浏览器中的兼容性。 首先,我们需要了解不同浏览器对HTML5新特性的支持情况。现代浏览器如Chrome、Safari和新版Firefox...

    2014-5-6更新 兼容ie[6-9]、火狐、Chrome、opera、maxthon3、360浏览器的js本地图片预览

    兼容ie[6-9]、火狐、Chrome、opera、maxthon3、360浏览器的js本地图片预览"提供了一个JavaScript解决方案,用于实现一个功能强大的本地图片预览功能,它能在多种主流浏览器中正常工作,包括古老的Internet Explorer ...

    asp 上传图片预览 ie7-11 火狐 谷歌 qq 360

    在ASP(Active Server Pages)开发中,实现图片上传并预览功能是一项常见的需求,尤其在兼容多种浏览器,如IE7到IE11、火狐、谷歌、QQ浏览器和360浏览器时,需要考虑跨浏览器的兼容性问题。本文将详细讲解如何在这些...

    asp.net IE6、7、8 图片上传前预览

    - 如果支持`files`属性(如Firefox等现代浏览器),`imgObjPreview.src`被设置为`docObj.files[0].getAsDataURL()`,这将创建一个基于文件内容的Base64编码的URL,用以显示图片预览。 - 对于不支持`files`属性的...

    jsp 文件上传浏览,支持ie6,ie7,ie8.docx

    // 新的预览代码,支持IE6、IE7,IE8也支持,firefox不支持! var newPreview = document.getElementById("newPreview"); newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgFile...

    在线预览PDF(无需任何插件) 支持IE/Firefox/Coogle

    6. **浏览器兼容性**:针对IE、Firefox和Chrome等不同浏览器,可能需要针对其特性进行特定的代码优化和适配。例如,对于IE,可能需要使用条件注释或polyfill来兼容旧版本的JavaScript API。 7. **响应式设计**:...

    asp.net 多图片上传 可预览 兼容火狐 IE

    在本场景中,"ASP.NET 多图片上传 可预览 兼容火狐 IE"是一个功能实现,它允许用户在网页上一次性上传多张图片,并在上传前或上传过程中提供预览功能,同时确保该功能在不同浏览器,如火狐(Firefox)和IE(Internet...

    jQuery上传图片预览,简洁版,可兼容IE和FIREFOX

    本文将深入探讨如何使用jQuery实现一个简洁版的图片上传预览功能,这个功能可以兼容包括IE和Firefox在内的多种浏览器。 首先,我们需要理解图片预览的基本原理。在用户选择文件之前,我们无法直接预览图片。但是,...

Global site tag (gtag.js) - Google Analytics