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 id="preview_wrapper">         <div 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>

上一篇：向左滚动的状态栏特效

下一篇：随日期播放网页背景音乐