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

最新推荐文章于 2020-11-04 18:06:12 发布
最新推荐文章于 2020-11-04 18:06:12 发布
阅读量499 收藏
点赞数
分类专栏： CSS+HTML javascript 文章标签： ie firefox wrapper filter file input
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">          
  2. <html xmlns="http://www.w3.org/1999/xhtml">          
  3. <head>          
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />          
  5. <title>Firefox3,IE6,IE7,IE8上传图片预览</title>          
  6. <style type="text/css">         
  7. #preview_wrapper{           
  8.     display:inline-block;           
  9.     width:300px;           
  10.     height:300px;           
  11.     background-color:#CCC;           
  12. }          
  13. #preview_fake{ /* 该对象用户在IE下显示预览图片 */           
  14.     filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);           
  15. }          
  16. #preview_size_fake{ /* 该对象只用来在IE下获得图片的原始尺寸，无其它用途 */           
  17.     filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);             
  18.     visibility:hidden;           
  19. }          
  20. #preview{ /* 该对象用户在FF下显示预览图片 */           
  21.     width:300px;           
  22.     height:300px;           
  23. }    
  24. </style>      
  25. <script type="text/javascript">    
  26.           
  27. function onUploadImgChange(sender){           
  28.     if( !sender.value.match( /.jpg|.gif|.png|.bmp/i ) ){           
  29.         alert('图片格式无效！');           
  30.         return false;           
  31.     }           
  32.                
  33.     var objPreview = document.getElementById( 'preview' );           
  34.     var objPreviewFake = document.getElementById( 'preview_fake' );           
  35.     var objPreviewSizeFake = document.getElementById( 'preview_size_fake' );   
  36.        
  37.                
  38.     if( sender.files &&  sender.files[0] ){           
  39.         objPreview.style.display = 'block';           
  40.         objPreview.style.width = 'auto';           
  41.         objPreview.style.height = 'auto';           
  42.                    
  43.         // Firefox 因安全性问题已无法直接通过 input[file].value 获取完整的文件路径           
  44.         objPreview.src = sender.files[0].getAsDataURL();               
  45.     }else if( objPreviewFake.filters ){            
  46.         // IE7,IE8 在设置本地图片地址为 img.src 时出现莫名其妙的后果           
  47.         //（相同环境有时能显示，有时不显示），因此只能用滤镜来解决           
  48.                    
  49.         // IE7, IE8因安全性问题已无法直接通过 input[file].value 获取完整的文件路径           
  50.         sender.select();           
  51.         var imgSrc = document.selection.createRange().text;           
  52.                    
  53.         objPreviewFake.filters.item(           
  54.             'DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc;           
  55.         objPreviewSizeFake.filters.item(           
  56.             'DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc;           
  57.                    
  58.         autoSizePreview( objPreviewFake,            
  59.             objPreviewSizeFake.offsetWidth, objPreviewSizeFake.offsetHeight );           
  60.         objPreview.style.display = 'none';           
  61.     }           
  62. }           
  63.           
  64. function onPreviewLoad(sender){   
  65.     autoSizePreview( sender, sender.offsetWidth, sender.offsetHeight );           
  66. }   
  67.           
  68. function autoSizePreview( objPre, originalWidth, originalHeight ){        
  69.     var zoomParam = clacImgZoomParam( 300, 300, originalWidth, originalHeight );           
  70.     objPre.style.width = zoomParam.width + 'px';           
  71.     objPre.style.height = zoomParam.height + 'px';           
  72.     objPre.style.marginTop = zoomParam.top + 'px';           
  73.     objPre.style.marginLeft = zoomParam.left + 'px';           
  74. }           
  75.           
  76. function clacImgZoomParam( maxWidth, maxHeight, width, height ){           
  77.     var param = { width:width, height:height, top:0, left:0 };           
  78.                
  79.     if( width>maxWidth || height>maxHeight ){           
  80.         rateWidth = width / maxWidth;           
  81.         rateHeight = height / maxHeight;           
  82.                    
  83.         if( rateWidth > rateHeight ){           
  84.             param.width =  maxWidth;           
  85.             param.height = height / rateWidth;           
  86.         }else{           
  87.             param.width = width / rateHeight;           
  88.             param.height = maxHeight;           
  89.         }           
  90.     }           
  91.                
  92.     param.left = (maxWidth - param.width) / 2;           
  93.     param.top = (maxHeight - param.height) / 2;           
  94.                
  95.     return param;           
  96. }           
  97. </script>          
  98.           
  99. </head>          
  100.           
  101. <body>          
  102.     <div id="preview_wrapper">          
  103.         <div id="preview_fake">          
  104.             <img id="preview" οnlοad="onPreviewLoad(this)"/>          
  105.         </div>          
  106.     </div>          
  107.     <br/>          
  108.     <input id="upload_img" type="file" οnchange="onUploadImgChange(this)"/>          
  109.     <br/>          
  110.     <img id="preview_size_fake"/><span id="swh"></span>        
  111. </body>          
  112. </html>  
lqc851011
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
图片预览（兼容IE8）JS代码（包含demo）
02-28
此图片预览插件为JS代码，具体可以在我的博客中看，如果没有资源的话，可以私聊博主。 这款插件最好的地方在于可以兼容IE8。
本地图片预览(支持IE6/IE7/IE8/Firefox3)经验总结
01-19
这里我们按浏览器分，主要包括IE6，IE7/8 和Firefox3， 不包含Opera，Safari和Chrome，这三个基本上需求很小，没有研究。 总结一下就是： IE6下可以直接从file的value获取图片路径来显示预览。 IE7和IE8下通过select...
多图片上传+图片预览，兼容所有浏览器 IE5/IE6/IE7/IE8/IE9/Chrome/Safari/Firefox/Opera/
hnfeitianwugui的专栏
04-17 1755
http://dotnet.aspx.cc/file/Multi-Files-Upload-With-Preview.aspx
type="file"实现兼容IE8本地选择图片预览
a119250729的博客
09-05 169
一、HTML代码 1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UploadImagePage.aspx.cs" Inherits="Webs.pages.BookingNote.UploadImagePage" %> 2 3 <!DOCTYPE html> ...
web前端学习笔记-本地图片、文件上传并预览（兼容ie8）
Mr. Ding的小博客
11-04 878
文件上传通常会涉及到FileReader对象，主流的chrome FireFox edge 都支持FileReader对象,ie浏览器中ie10以下不支持FileReader对象，ie10以下文件上传的解决办法是用flash 一、FileReader对象实现文件上传并预览（图片） 文件上传主要是拿到用户上传的本地文件并提交给后台，图片上传是文件上传特殊的一类，经常需要实现图片的预览，预览图片用两种方法，方法一：前端获取图片的base64再渲染页面，方法二：前端提交数据到后台，后台返回一个图片链接，前端
ie8本地图片上传预览示例代码
09-04
需要注意的是，这种方法只适用于IE8，其他浏览器如Firefox、Chrome、Safari等都有自己的解决方案，例如使用FileReader API读取文件内容并转化为DataURL，然后赋值给`<img>`的`src`属性。对于现代浏览器，可以使用...
兼容IE6,IE7,IE8和Firefox的图片上传预览效果
03-28
标题提到的"兼容IE6,IE7,IE8和Firefox的图片上传预览效果"直指浏览器兼容性问题，这是一个在过去很长一段时间内困扰开发者的关键挑战。由于早期的Internet Explorer（IE6, IE7, IE8）对现代Web标准的支持不足，而...
兼容最新firefox、chrome和IE的javascript图片预览实现代码
10-25
主要介绍了兼容最新firefox、chrome和IE的javascript图片预览实现代码,测试了浏览器firefox6、firefox12、chrome 25.0.1364.172 m、IE6-IE10 都兼容,需要的朋友可以参考下
关于适配各种浏览器的图片预览。
weixin_30483495的博客
04-21 113
最近被兼容性整的微微头大。 首先全局性的兼容性问题，就是文件上传及预览； 上传使用jquery fileupload，插件本身就适配了IE8以上的浏览器。demo地址：http://blueimp.github.io/jQuery-File-Upload/ 本次要说的则是对上传前的图片预览问题； l两种思路。（1），上传后返回路径进行展示 （2），上传前选择本地路径对其展示 第一种方法...
JS上传图片前预览（兼容IE7）
06-22
JS上传图片前预览（兼容IE7）! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/
整理 IE 7、8预览本地图片和获取本地图片大小
weixin_30849403的博客
11-17 106
本文不是讨论技术问题，只是将现有的关于图片预览方面的javascript 代码进行整理，希望对那些不知道这方面知识的朋友有些帮助 问题原因 在ie6我们要预览一个本地文件只需要这样既可实现： Code1<html>2<head>3<script>45//预览照片6functionpreviewP...
javascript上传预览图片（IE8支持）
u014798510的博客
07-22 4775
html: <input type="file" multiple="true" name="imgOne" id="imgOne" onchange="preImg(this.id,'imgPre');" /> <img id="imgPre" src="" width="300px" height="300px" style="display: block;" /> javasc
兼容ie6、ie7、ie8 和FF的本地上传图片预览，并客户端判断文件大小和文件格式
zhll3377的专栏
04-27 1206
前段时间有个项目需要做一个上传图片立马能看到预览图的效果 预览的图还是直接在客户端操作而不是先上传到服务器之后再返回URI的方式。查了相关的资料之后发现有一些现成的方法，但是对于浏览器的兼容性都不好，有的只支持IE6 有的只支持FF。于是自己动手写了这么一个demo。并且支持客户端判断文件大小和文件格式。 其实原理就是通过各种版本的浏览器实行不同的实现机制。 源代码：ie6_ie7_ie8_FF-upload-Preview.rar Firefox3,IE6,IE7,IE8上传图片预
IE8以下不能预览本机图片最新解决办法
易大师不易
11-28 987
该问题直接用代码比较直观： 1.假设页面如此 &lt;div&gt; &lt;div class="upload-face-panel btnbgim"&gt; &lt;input id="imageFile" name="imageFile" type="file"/&gt; &lt;div class="upload-face&quot
Atitit. IE8.0 显示本地图片预览解决方案 img.src=本地图片路径无效的解决方案...
weixin_33918114的博客
08-24 141
Atitit. IE8.0 显示本地图片预览解决方案 img.src=本地图片路径无效的解决方案   1. IE8.0 显示本地图片 img.src=本地图片路径无效的解决方案 1 1.1. div来完成 。filter 1 1.2. 如果是本地html，好像用相对路径呀不行 2 1.3. URL.createObjectURL ( ma sida) 2 1.4. Css 背景（吗四大） 2 ...
IE8选图片显示预览图效果
风轻云断的博客
05-08 1607
坑点 IE8不能获取到inputd的files对象 IE8设置本地图片地址为src后，有的图显示，有的图不显示（未探索具体原因） 解决办法 支持files对象的就用base64的方法（不要问我为什么要用base64，最先想到的就是base64） 不支持的就通过滤镜方式来实现 界面HTML代码 &lt;input type="file" id="fileUpload"&gt; &...
Firefox与IE的JavaScript与CSS差异详解
"这篇文章主要探讨了Firefox和Internet Explorer（IE）之间在JavaScript和CSS方面的差异，特别是关于PNG透明处理、innerText与textContent的区别、禁止选取网页内容的方法、滤镜的应用以及事件处理的异同。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值