上传图片前预览功能兼容多个浏览器

　　这是一个上传图片的预览功能，可以支持目前绝大部分图片格式（.jpg|.gif|.png|.bmp），如果您选择的不是图片类型，会提示“图片格式无效”，当然你也可以添加已知的图片类型，源码中有提示。目前已经在Firefox3,IE6,IE7,IE8等浏览器测试通过，Firefox 因安全性问题已无法直接通过input[file].value，IE7,IE8 在设置本地图片地址为 img.src 时出现莫名其妙的后果，（相同环境有时能显示，有时不显示），因此只能用滤镜来解决。

<!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> <title>Firefox3,IE6,IE7,IE8上传图片预览 - Liehuo.net</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('烈火网(Liehuo.net)提示：图片格式无效！'); 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> <input id="upload_img" type="file" onchange="onUploadImgChange(this)"/> <img id="preview_size_fake"/> </body> </html> <center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

热点

上传图片前预览功能兼容多个浏览器

由 dawei

您错过了

优化云客服平台的稳定性和响应速度

云客服具备强大的数据分析能力

云客服推动客户服务行业智能化升级

云客服系统提升企业响应速度的秘诀

上传图片前预览功能 兼容多个浏览器

由 dawei

相关文章

使用softaculous创建WordPress临时站点

怎样建网站更有利于网站推广和优化？

中企动力带你了解舌尖上的餐饮网站设计趋势

您错过了

优化云客服平台的稳定性和响应速度

云客服具备强大的数据分析能力

云客服推动客户服务行业智能化升级

云客服系统提升企业响应速度的秘诀

上传图片前预览功能兼容多个浏览器