解决Firefox3,IE7,IE8上传图片预览.txt

最新推荐文章于 2019-03-20 14:51:08 发布
最新推荐文章于 2019-03-20 14:51:08 发布
阅读量779 收藏 2
点赞数
分类专栏： JAVASCRIPT 文章标签： ie firefox wrapper function xhtml file


<!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" οnlοad="onPreviewLoad(this)"/>
  </div>
 </div>
 <br/>
 <input id="upload_img" type="file" οnchange="onUploadImgChange(this)"/>
 <br/>
 <img id="preview_size_fake"/>
</body>
</html>

tianlebest
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
实现本地图片预览（ie11,chrome最新版，firefox最新版已测式通过）
liunian110110的专栏
03-04 1699
MyHtml.html function previewImage(){ //判断浏览器是否支持FileReader接口 if(typeof FileReader == 'undefined'){   //这里用来提示用户的浏览器不支持图片预览所使用FileReader接口  alert("你的浏览器不支持FileReader接口。无法看到图片预览");     //使选择控件
兼容IE8、火狐的本地图片预览+等比例缩放
编程手札
09-21 5464
来源网上的资源：  Firefox3,IE6,IE7,IE8上传图片预览 <!-- #preview_wrapper{ display:inline-block; width:300px; height:300px; ba
兼容IE、新版Chrome、Firefox，实现本地图片等比例缩放预览
SkunkLuck
11-30 719
以前转载过一篇《兼容IE8、火狐的本地图片预览+等比例缩放》的文章，时至今日在新版的Chrome和Firefox上已经不能用了，原因getAsDataURL方法已经失效。 当然在Chrome、Firefox上可以通过HTML5来实现，今天把它写出来了，见源码： [html] view plaincopy >   html xmlns="h
记录一下： 火狐 IE 实现图片本地预览 demo
weixin_30387339的博客
12-26 94
牛人详细分析：http://www.cnblogs.com/cloudgamer/archive/2009/12/22/ImagePreview.html 图片上传预览是一种在图片上传之前对图片进行本地预览的技术。使用户选择图片后能立即查看图片，而不需上传服务器，提高用户体验。但随着浏览器安全性的提高，要实现图片上传预览也越来越困难。不过群众的智慧是无限的，网上已经有很多变通或先进的方法来...
IE8选图片显示预览图效果
风轻云断的博客
05-08 1609
坑点 IE8不能获取到inputd的files对象 IE8设置本地图片地址为src后，有的图显示，有的图不显示（未探索具体原因） 解决办法 支持files对象的就用base64的方法（不要问我为什么要用base64，最先想到的就是base64） 不支持的就通过滤镜方式来实现 界面HTML代码 &lt;input type="file" id="fileUpload"&gt; &...
本地图片预览(支持IE6/IE7/IE8/Firefox3)经验总结
01-19
这里我们按浏览器分，主要包括IE6，IE7/8 和Firefox3， 不包含Opera，Safari和Chrome，这三个基本上需求很小，没有研究。 总结一下就是： IE6下可以直接从file的value获取图片路径来显示预览。 IE7和IE8下通过select...
ie8本地图片上传预览示例代码
09-04
需要注意的是，这种方法只适用于IE8，其他浏览器如Firefox、Chrome、Safari等都有自己的解决方案，例如使用FileReader API读取文件内容并转化为DataURL，然后赋值给`<img>`的`src`属性。对于现代浏览器，可以使用...
兼容IE6,IE7,IE8和Firefox的图片上传预览效果
03-28
总之，要解决“兼容IE6,IE7,IE8和Firefox的图片上传预览效果”这一问题，我们需要深入理解各种浏览器的特性和限制，熟练掌握ActiveX、Flash以及HTML5 File API的相关知识，并通过条件判断或特性检测来编写兼容的代码...
兼容最新firefox、chrome和IE的javascript图片预览实现代码
10-25
主要介绍了兼容最新firefox、chrome和IE的javascript图片预览实现代码,测试了浏览器firefox6、firefox12、chrome 25.0.1364.172 m、IE6-IE10 都兼容,需要的朋友可以参考下
ie8 用css实现图片的等比例缩放
weixin_33831673的博客
01-30 437
2019独角兽企业重金招聘Python工程师标准>>> ...
图片预览js，兼容ie8
08-25
一个图片预览的js，兼容IE6和IE8，用的是html控件，选择图片后浏览。
图片预览（兼容IE8）JS代码（包含demo）
02-28
此图片预览插件为JS代码，具体可以在我的博客中看，如果没有资源的话，可以私聊博主。 这款插件最好的地方在于可以兼容IE8。
图片缩放的css代码，测试过IE6和IE8
08-18
在贵站发现控制图片缩放的代码，我再修改了一下，现在更完美了： <script> function ImageControl(srcobj,maxwidth,maxheight) { var OImg=new Image(); OImg.src=srcobj.src; var scale=OImg.width>OImg.height?(OImg.width>maxwidth?OImg.width/maxwidth:1):(OImg.height>maxheight?OImg.height/maxheight:1); srcobj.width=OImg.width/scale; srcobj.Height=OImg.height/scale; } </script> <style> .mjw_pic { MAX-WIDTH: 126px!important;HEIGHT: 126px!important;width:expression(this.width > 126 ? "126px" : this.width)!important; } </style> <img src="http://www.52buyers.com/uploadimage/2010/201072116202523.jpg" onload="ImageControl(this,126,126)" class="mjw_pic" />
JS图片查看器（包括平移、放大缩小、图片旋转功能）支持IE和Firefox
04-13
JS图片查看器，带上下左右平移、放大缩小、图片旋转功能。很好很强大~！O(∩_∩)O 支持Firefox，除旋转以外的功能。
多图片预览-左右切换查看-兼容PC、移动端
05-24
点击查看图片预览，支持多图片预约，可左右切换查看，兼容PC、移动端
图片局部放大-兼容IE8和Chrome浏览器
zyytaiyame的博客
01-06 1836
图片局部放大-兼容IE8和Chrome浏览器在线测试打包下载
实现点击图片查看大图，可滚轮放大缩小，可拖动图片，兼容ie8及以上，ie7开始就有问题，以后拿出去用的时候再完善吧
akxj2022的博客
03-20 2766
前端小小白一枚，一直羡慕前端大神分分钟写出来一个模态层图片预览，这两天项目不吃紧，自己动手试做一个 既然是自己动手，虽然功能比不上大神的，不过兼容性调到了ie8，还是小有成就的，现分享出来给其他小白参考，路过的大神有更牛掰的代码，欢迎评论分享 工具：hbuilder 遇到的兼容性问题： ie8不支持 addEventLisenter，要判断，改用 attachEvent ie8不支持通过...
IE8 设置图片大小，没有效果
yan263364的博客
11-09 1825
一、问题<img />在IE8上面只能看到原图，不能设置宽高 二、经过在页面上用的img标签，通过css设置图片的宽高，IE8没有效果；通过在img标签上设置width、height属性及属性值，也没有效果 // 第一种方式：无效 img{ width:500px; height:300px; } // 第二种方式：无效 <img src="*.jpg" width="500" height="30
background-size设置背景图片自适应 在ie8下失效的问题
热门推荐
oliver666666的博客
04-27 1万+
遇到的问题是 ：有一个div ，div用绿色框体现。然后通过js控制框的大小，实现动态的改变div的大小。 （放大缩小窗口，div跟随变大变小。） 设置了div的css属性  background-image：url(http://i1.piimg.com/1949/c777d079f3fb68ec.png); background-size：cover； 通过浏览器使用发现，div框
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值