下面的是ie9下面實現的預覽，跟ie8還是不一樣的，不過我記得貌似ie8好像也是利用了fiter的功能，因為項目只要求在ie9以上，所以就沒有寫出ie8的啦 複製程式碼代碼如下: Document <br />#kk{ <br />width:400px; <br />height:400px; <br />overflow: hidden; <br />} <br />#preview_wrapper{ <wrapper 🎜>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 />} <br />overflow: hidden; <br />} <br />} <🎜只用來在IE下方取得圖片的原始尺寸，無其它用途*/ <br />filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image); <br />width:300px; <br />visibility:hidden; <ibility:hidden; 🎜>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'); <br />var objPreviewFake = document.getElementById('preview_fake); .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 時出現為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("已成功選擇圖片！"); alert(objPreviewSizeFake.offsetWidth); <br />autoSizePreview( objPreviewFake,objPreviewSizeFake.offsetWidth, objPreviewSizeFake.offsetHeight ); <oco>objalviewn. onPreviewLoad( sender){ <br />autoSizePreview( sender, sender.offsetWidth, sender.offsetHeight ); <br />} <br />function autoSizePreview( objPre, origiginalWidth, origamHeight 300,a$a)(Paroom), origama$a)> originalWidth, originalHeight ); <br />objPre.style.width = zoomParam.width 'px'; <br />objPre.style.height = zoomParam.height 'px'; <br />objPre.style.marginTop = zoomParam.top 'poom'p. ; <br />objPre.style.marginLeft = zoomParam.left 'px'; <br />} <br />function clacImgZoomParam( maxWidth, maxHeight, width, height ){ <br />var param = { widight. , top:0, left:0 }; <br />if( width>maxWidth || height>maxHeight ){ <br />rateWidth = width / maxWidth; <br />rateHeight = height / maxHeight; rateHeight ){ <br />param.width = maxWidth; <br />param.height = height / rateWidth; <br />}else{ <br />param.width = width / rateHeight <<; 🎜>} <br />} <br />param.left = (maxWidth - param.width) / 2; <br />param.top = (maxHeight - param.height) / 2; <br />return param; } <br />
