1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>Firefox3,IE6,IE7,IE8涓婁紶鍥剧墖棰勮</title>
6 <style type="text/css">
7 #preview_wrapper{
8 display:inline-block;
9 width:92px;
10 height:130px;
11 background-color:#CCC;
12 padding:0;
13 overflow:hidden;
14 }
15 #preview_fake{ /* 璇ュ璞＄敤鎴峰湪IE涓嬫樉绀洪瑙堝浘鐗?*/
16 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
17 }
18 #preview_size_fake{ /* 璇ュ璞″彧鐢ㄦ潵鍦↖E涓嬭幏寰楀浘鐗囩殑鍘熷灏哄锛屾棤鍏跺畠鐢ㄩ€?*/
19 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);
20 visibility:hidden;
21 }
22 #preview{ /* 璇ュ璞＄敤鎴峰湪FF涓嬫樉绀洪瑙堝浘鐗?*/
23 width:92px;
24 height:130px;
25 border:0;
26 }
27 </style>
28
29 <script type="text/javascript">
30 function onUploadImgChange(sender){
31 if( !sender.value.match( /.jpg|.gif|.png|.bmp/i ) ){
32 alert("图片格式有误！");
33 return false;
34 }
35
36 var objPreview = document.getElementById( 'preview' );
37 var objPreviewFake = document.getElementById( 'preview_fake' );
38 var objPreviewSizeFake = document.getElementById( 'preview_size_fake' );
39
40 if( sender.files && sender.files[0] ){
41 objPreview.style.display = 'block';
42 // objPreview.style.width = '92';
43 // objPreview.style.height = '130';
44
45 // Firefox 鍥犲畨鍏ㄦ€ч棶棰樺凡鏃犳硶鐩存帴閫氳繃 input[file].value 鑾峰彇瀹屾暣鐨勬枃浠惰矾寰?
46 objPreview.src = sender.files[0].getAsDataURL();
47 }else if( objPreviewFake.filters ){
48 // IE7,IE8 鍦ㄨ缃湰鍦板浘鐗囧湴鍧€涓?img.src 鏃跺嚭鐜拌帿鍚嶅叾濡欑殑鍚庢灉
49 //锛堢浉鍚岀幆澧冩湁鏃惰兘鏄剧ず锛屾湁鏃朵笉鏄剧ず锛夛紝鍥犳鍙兘鐢ㄦ护闀滄潵瑙ｅ喅
50
51 // IE7, IE8鍥犲畨鍏ㄦ€ч棶棰樺凡鏃犳硶鐩存帴閫氳繃 input[file].value 鑾峰彇瀹屾暣鐨勬枃浠惰矾寰?
52 sender.select();
53 var imgSrc = document.selection.createRange().text;
54
55 objPreviewFake.filters.item(
56 'DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc;
57 objPreviewSizeFake.filters.item(
58 'DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc;
59
60 autoSizePreview( objPreviewFake,
61 objPreviewSizeFake.offsetWidth, objPreviewSizeFake.offsetHeight );
62 objPreview.style.display = 'none';
63 }
64 }
65
66 function onPreviewLoad(sender){
67 autoSizePreview( sender, sender.offsetWidth, sender.offsetHeight );
68 }
69
70 function autoSizePreview( objPre, originalWidth, originalHeight ){
71 var zoomParam = clacImgZoomParam( 92, 130, originalWidth, originalHeight );
72 objPre.style.width = zoomParam.width + 'px';
73 objPre.style.height = zoomParam.height + 'px';
74 objPre.style.marginTop = zoomParam.top + 'px';
75 objPre.style.marginLeft = zoomParam.left + 'px';
76 }
77
78 function clacImgZoomParam( maxWidth, maxHeight, width, height ){
79 var param = { width:width, height:height, top:0, left:0 };
80
81 if( width>maxWidth || height>maxHeight ){
82 rateWidth = width / maxWidth;
83 rateHeight = height / maxHeight;
84
85 if( rateWidth > rateHeight ){
86 param.width = maxWidth;
87 param.height = height / rateWidth;
88 }else{
89 param.width = width / rateHeight;
90 param.height = maxHeight;
91 }
92 }
93
94 param.left = (maxWidth - param.width) / 2;
95 param.top = (maxHeight - param.height) / 2;
96
97 return param;
98 }
99 </script>
100
101 </head>
102
103 <body>
104 <div id="preview_wrapper" style="">
105 <div id="preview_fake">
106 <img id="preview" onload="onPreviewLoad(this)" width="92" height="130" src=""/>
107 </div>
108 </div>
109 <br/>
110 <input id="upload" type="file" onchange="onUploadImgChange(this)"/>
111 <br/>
112 <img id="preview_size_fake" width="92" height="130"/>
113 </body>
114 </html>
