<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_19386"> <div class="blockcode"><div id="code_P27"><ol> <li><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> </li> <li><html xmlns="http://www.w3.org/1999/xhtml"> </li> <li><head> </li> <li><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </li> <li><title>Firefox3,IE6,IE7,IE8上传图片预览</title> </li> <li><style type="text/css"> </li> <li>#preview_wrapper{ </li> <li> display:inline-block; </li> <li> width:300px; </li> <li> height:300px; </li> <li> background-color:#CCC; </li> <li>} </li> <li>#preview_fake{ /* 该对象用户在IE下显示预览图片 */ </li> <li> filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale); </li> <li>} </li> <li>#preview_size_fake{ /* 该对象只用来在IE下获得图片的原始尺寸，无其它用途 */ </li> <li> filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image); </li> <li> visibility:hidden; </li> <li>} </li> <li>#preview{ /* 该对象用户在FF下显示预览图片 */ </li> <li> width:300px; </li> <li> height:300px; </li> <li>} </li> <li></style> </li> <li> <li><script type="text/javascript"> </li> <li>function onUploadImgChange(sender){ </li> <li> if( !sender.value.match( /.jpg|.gif|.png|.bmp/i ) ){ </li> <li> alert('图片格式无效！'); </li> <li> return false; </li> <li> } </li> <li> </li> <li> var objPreview = document.getElementById( 'preview' ); </li> <li> var objPreviewFake = document.getElementById( 'preview_fake' ); </li> <li> var objPreviewSizeFake = document.getElementById( 'preview_size_fake' ); </li> <li> </li> <li> if( sender.files && sender.files[0] ){ </li> <li> objPreview.style.display = 'block'; </li> <li> objPreview.style.width = 'auto'; </li> <li> objPreview.style.height = 'auto'; </li> <li> </li> <li> // Firefox 因安全性问题已无法直接通过 input[file].value 获取完整的文件路径 </li> <li> objPreview.src = sender.files[0].getAsDataURL(); </li> <li> }else if( objPreviewFake.filters ){ </li> <li> // IE7,IE8 在设置本地图片地址为 img.src 时出现莫名其妙的后果 </li> <li> //（相同环境有时能显示，有时不显示），因此只能用滤镜来解决 </li> <li> </li> <li> // IE7, IE8因安全性问题已无法直接通过 input[file].value 获取完整的文件路径 </li> <li> sender.select(); </li> <li> var imgSrc = document.selection.createRange().text; </li> <li> </li> <li> objPreviewFake.filters.item( </li> <li> 'DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc; </li> <li> objPreviewSizeFake.filters.item( </li> <li> 'DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc; </li> <li> </li> <li> autoSizePreview( objPreviewFake, </li> <li> objPreviewSizeFake.offsetWidth, objPreviewSizeFake.offsetHeight ); </li> <li> objPreview.style.display = 'none'; </li> <li> } </li> <li>} </li> <li> <li>function onPreviewLoad(sender){ </li> <li> autoSizePreview( sender, sender.offsetWidth, sender.offsetHeight ); </li> <li>} </li> <li> <li>function autoSizePreview( objPre, originalWidth, originalHeight ){ </li> <li> var zoomParam = clacImgZoomParam( 300, 300, originalWidth, originalHeight ); </li> <li> objPre.style.width = zoomParam.width + 'px'; </li> <li> objPre.style.height = zoomParam.height + 'px'; </li> <li> objPre.style.marginTop = zoomParam.top + 'px'; </li> <li> objPre.style.marginLeft = zoomParam.left + 'px'; </li> <li>} </li> <li> <li>function clacImgZoomParam( maxWidth, maxHeight, width, height ){ </li> <li> var param = { width:width, height:height, top:0, left:0 }; </li> <li> </li> <li> if( width>maxWidth || height>maxHeight ){ </li> <li> rateWidth = width / maxWidth; </li> <li> rateHeight = height / maxHeight; </li> <li> </li> <li> if( rateWidth > rateHeight ){ </li> <li> param.width = maxWidth; </li> <li> param.height = height / rateWidth; </li> <li> }else{ </li> <li> param.width = width / rateHeight; </li> <li> param.height = maxHeight; </li> <li> } </li> <li> } </li> <li> </li> <li> param.left = (maxWidth - param.width) / 2; </li> <li> param.top = (maxHeight - param.height) / 2; </li> <li> </li> <li> return param; </li> <li>} </li> <li></script> </li> <li> <li></head> </li> <li> <li><body> </li> <li> <div id="preview_wrapper"> </li> <li> <div id="preview_fake"> </li> <li> <img id="preview" onload="onPreviewLoad(this)"/> </li> <li> </div> </li> <li> </div> </li> <li> <br>> </li> <li> <input id="upload_img" type="file" onchange="onUploadImgChange(this)">; </li> <li> <br>> </li> <li> <img id="preview_size_fake" alt="js 上傳圖片前，預覽圖片。 。 。相容於 IE 6 IE7 IE8 、 火狐。 。 。" >; </li> <li>身體> </li> <li> </ol></div></div> </td></tr></table>
