余志国网站设计工作室是专业从事义乌网站建设、义乌外贸网站建设、义乌网站制作、义乌网站设计的专业义乌网站建设工作室,是义乌外贸网站建设专家!

js兼容IE、谷歌Chrome、火狐Firefox的上传图片预览代码

分类:程序开发 Tags: javascript 兼容浏览器 上传图片预览 评论:1 浏览:8156 最近更新时间:2008/6/17 9:56:06

 
 
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  4. <title>图片上传</title>
  5. <script>
  6. function viewmypic(mypic,imgfile) {
  7. if (imgfile.value){
  8. mypic.src=imgfile.value;
  9. mypic.style.display="";
  10. mypic.border=1;
  11. }
  12. }
  13. </script>
  14. </head>
  15. <body>
  16. <center>
  17. <form >
  18. <input name="imgfile" type="file" id="imgfile" size="40" onchange="viewmypic(showimg,this.form.imgfile);" />
  19. <br />
  20. </form>
  21. <img name="showimg" id="showimg" src="" style="display:none;" alt="预览图片" />
  22. <br />
  23. </div>
  24. <div style="display:none">
  25. </div>
  26. </center>
  27. </body>
  28. </html> 
 
以下代码兼容IE、谷歌Chrome、火狐Firefox:
代码转载自:http://blog.csdn.net/nhconch/article/details/7295456
 
  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>本地图片预览</title>     
  6. <style type="text/css">
  7. #preview{width:100px;height:100px;border:1px solid #000;overflow:hidden;}
  8. #imghead {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);}
  9. </style>
  10. <script type="text/javascript">
  11. function previewImage(file)
  12. {
  13.   var MAXWIDTH  = 100;
  14.   var MAXHEIGHT = 100;
  15.   var div = document.getElementById('preview');
  16.   if (file.files && file.files[0])
  17.   {
  18.     div.innerHTML = '<img id=imghead>';
  19.     var img = document.getElementById('imghead');
  20.     img.onload = function(){
  21.       var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
  22.       img.width = rect.width;
  23.       img.height = rect.height;
  24.       img.style.marginLeft = rect.left+'px';
  25.       img.style.marginTop = rect.top+'px';
  26.     }
  27.     var reader = new FileReader();
  28.     reader.onload = function(evt){img.src = evt.target.result;}
  29.     reader.readAsDataURL(file.files[0]);
  30.   }
  31.   else
  32.   {
  33.     var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
  34.     file.select();
  35.     var src = document.selection.createRange().text;
  36.     div.innerHTML = '<img id=imghead>';
  37.     var img = document.getElementById('imghead');
  38.     img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
  39.     var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
  40.     status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);
  41.     div.innerHTML = "<div id=divhead style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;margin-left:"+rect.left+"px;"+sFilter+src+"\"'></div>";
  42.   }
  43. }
  44. function clacImgZoomParam( maxWidth, maxHeight, width, height ){
  45.     var param = {top:0, left:0, width:width, height:height};
  46.     if( width>maxWidth || height>maxHeight )
  47.     {
  48.         rateWidth = width / maxWidth;
  49.         rateHeight = height / maxHeight;
  50.         
  51.         if( rateWidth > rateHeight )
  52.         {
  53.             param.width =  maxWidth;
  54.             param.height = Math.round(height / rateWidth);
  55.         }else
  56.         {
  57.             param.width = Math.round(width / rateHeight);
  58.             param.height = maxHeight;
  59.         }
  60.     }
  61.     
  62.     param.left = Math.round((maxWidth - param.width) / 2);
  63.     param.top = Math.round((maxHeight - param.height) / 2);
  64.     return param;
  65. }
  66. </script>     
  67. </head>     
  68. <body>
  69. <div id="preview">
  70.     <img id="imghead" width=100 height=100 border=0 src=''>
  71. </div>
  72.     <br/>     
  73.     <input type="file" onchange="previewImage(this)" />     
  74. </body>     
  75. </html>    

本文地址:/357/
  • 相关文章
  • 推荐文章
  • 最新文章
发表评论





您的IP:44.192.38.49,来自:
city
city : 谢谢你的教材,找了很久,终于可以解决问题了。 2013/1/18 13:38:06

留言

 


免费咨询
建站咨询热线
15967985565

扫一扫微信咨询
QQ: 358758308 Skype: yuzhiguo Facebook: yuzhiguo Email