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

发布时间：2018-09-04 11:52:51 所属栏目：编程来源：站长网

导读：这是一个上传图片的预览成果，可以支持今朝绝大部门图片名目（.jpg|.gif|.png|.bmp），假如您选择的不是图片范例，会提醒图片名目无效，虽然你也可以添加已知的图片范例，源码中有提醒。今朝已经在 Firefox 3,IE6,IE7, IE8 等赏识器测试通过，Firefox 因安

　　这是一个上传图片的预览成果，可以支持今朝绝大部门图片名目（.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> <br/> <input id="upload_img" type="file" onchange="onUploadImgChange(this)"/> <br/> <img id="preview_size_fake"/> </body> </html> <br /><center>如不能表现结果，请按Ctrl+F5革新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提醒：可修改儿女码再运行!

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

MYSQL_框架之主从GTID	MySQL Online DDL的实
MySQL 5.7 mysqldumps	MySQL TEXT、DATE、SE

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

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