<rt id="reitf"><i id="reitf"></i></rt>
  • <li id="reitf"><th id="reitf"><div id="reitf"></div></th></li>
      <noscript id="reitf"></noscript>
    <strong id="reitf"><dfn id="reitf"></dfn></strong>
  • <thead id="reitf"></thead>
    <pre id="reitf"></pre>
  • <font id="reitf"><dl id="reitf"><output id="reitf"></output></dl></font>

    <font id="reitf"><dl id="reitf"><ruby id="reitf"></ruby></dl></font><tr id="reitf"><nobr id="reitf"><div id="reitf"></div></nobr></tr>
    余志國網站設計工作室是專業從事義烏網站建設、義烏外貿網站建設、義烏網站制作、義烏網站設計的專業義烏網站建設工作室,是義烏外貿網站建設專家!

    js兼容IE、谷歌Chrome、火狐Firefox的上傳圖片預覽代碼

    分類:程序開發 Tags: javascript 兼容瀏覽器 上傳圖片預覽 評論:1 瀏覽:7904 最近更新時間: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>    

    本文地址:http://www.d2ksoft.com/357/
    • 相關文章
    • 推薦文章
    • 最新文章
    發表評論





    您的IP:50.118.221.130,來自:美國
    city
    city : 謝謝你的教材,找了很久,終于可以解決問題了。 2013/1/18 13:38:06

    留言

     


    免費咨詢
    建站咨詢熱線
    15967985565

    掃一掃微信咨詢
    QQ: 358758308 Skype: yuzhiguo Facebook: yuzhiguo Email
    亚洲中文字幕波多野结衣,中文字幕第一页,色悠久久久久久久综合网,免费又黄又爽又色的视频