下面的是在ie9下面实现的预览，跟ie8还是不一样的，不过我记得貌似ie8好像也是利用了fiter的功能，因为项目只要求在ie9以上，所以就没有写出ie8的啦 复制代码代码如下: Document <br>#kk{ <br>width:400px; <br>height:400px; <br>overflow: hidden; <br>} <br>#preview_wrapper{ <br>width:300px; <br>height:300px; <br>background-color:#CCC; <br>overflow: hidden; <br>} <br>#preview_fake{ /* 该对象用于在IE下显示预览图片 */ <br>filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale); <br>width:300px; <br>overflow: hidden; <br>} <br>#preview_size_fake{ /* 该对象只用来在IE下获得图片的原始尺寸，无其它用途 */ <br>filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image); <br>width:300px; <br>visibility:hidden; <br>overflow: hidden; <br>} <br>#preview{ /* 该对象用于在FF下显示预览图片 */ <br>width:300px; <br>height:300px; <br>overflow: hidden; <br>} <br> <br>function onUploadImgChange(sender){ <br>if( !sender.value.match( /.jpg|.gif|.png|.bmp/i ) ){ <br>alert('图片格式无效！'); <br>return false; <br>} <br>var objPreview = document.getElementById('preview'); <br>var objPreviewFake = document.getElementById('preview_fake'); <br>var objPreviewSizeFake = document.getElementById('preview_size_fake'); <br>if( sender.files && sender.files[0] ){ //这里面就是chrome和ff可以兼容的了 <br>objPreview.style.display = 'block'; <br>objPreview.style.width = 'auto'; <br>objPreview.style.height = 'auto'; <br>// Firefox 因安全性问题已无法直接通过 input[file].value 获取完整的文件路径 <br>objPreview.src = sender.files[0].getAsDataURL(); <br>}else if( objPreviewFake.filters ){ <br>// IE7,IE8 在设置本地图片地址为 img.src 时出现莫名其妙的后果 <br>//（相同环境有时能显示，有时不显示），因此只能用滤镜来解决 <br>// IE7, IE8因安全性问题已无法直接通过 input[file].value 获取完整的文件路径 <br>sender.select(); <br>sender.blur(); <br>var imgSrc = document.selection.createRange().text; <br>objPreviewFake.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc; <br>objPreviewSizeFake.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc; <br>alert("已成功选择图片！"); <br>alert(objPreviewSizeFake.offsetWidth); <br>autoSizePreview( objPreviewFake,objPreviewSizeFake.offsetWidth, objPreviewSizeFake.offsetHeight ); <br>objPreview.style.display = 'none'; <br>} <br>} <br>function onPreviewLoad(sender){ <br>autoSizePreview( sender, sender.offsetWidth, sender.offsetHeight ); <br>} <br>function autoSizePreview( objPre, originalWidth, originalHeight ){ <br>var zoomParam = clacImgZoomParam( 300, 300, originalWidth, originalHeight ); <br>objPre.style.width = zoomParam.width 'px'; <br>objPre.style.height = zoomParam.height 'px'; <br>objPre.style.marginTop = zoomParam.top 'px'; <br>objPre.style.marginLeft = zoomParam.left 'px'; <br>} <br>function clacImgZoomParam( maxWidth, maxHeight, width, height ){ <br>var param = { width:width, height:height, top:0, left:0 }; <br>if( width>maxWidth || height>maxHeight ){ <br>rateWidth = width / maxWidth; <br>rateHeight = height / maxHeight; <br>if( rateWidth > rateHeight ){ <br>param.width = maxWidth; <br>param.height = height / rateWidth; <br>}else{ <br>param.width = width / rateHeight; <br>param.height = maxHeight; <br>} <br>} <br>param.left = (maxWidth - param.width) / 2; <br>param.top = (maxHeight - param.height) / 2; <br>return param; <br>} <br>
