JS實現上傳圖片前預覽的功能

2024-09-05 12:18:20

字體：大中小

來源：轉載

供稿：網友

上傳圖片前的預覽功能，讓用戶確認是否是需要上傳的圖片，本例代碼僅支持單圖的預覽，兼容性方面支持Firefox3,IE6,IE7,IE8等眾多主流的瀏覽器，代碼中需要說明的地方都有注釋，因此代碼的可擴展功能非常強，懂JS的朋友可以細心定制成你自己需要的功能。

<!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   class="4weyemq"   id="preview_wrapper">         <div   class="osm2k6o"   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>

上一篇：向左滾動的狀態欄特效

下一篇：隨日期播放網頁背景音樂