當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JS浏览本地图片
1 <html>
2 <head>
3 <title>瀏覽本地圖片</title>
4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
5 </head>
6 <body>
7 <p>
8 <style type="text/css">
9 #kk{
10 width:1000px;
11 height:300px;
12 overflow: hidden;
13 }
14 .preview_wrapper{
15 width:176px;
16 height:176px;
17 background-color:#CCC;
18 overflow: hidden;
19 }
20 .preview_fake{ /* 該對象用于在IE下顯示預覽圖片 */
21 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
22 width:176px;
23 overflow: hidden;
24 }
25 #preview_size_fake{ /* 該對象只用來在IE下獲得圖片的原始尺寸，無其它用途 */
26 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);
27 width:0px;
28 visibility:hidden;
29 overflow: hidden;
30 }
31 .preview{ /* 該對象用于在FF下顯示預覽圖片 */
32 width:176px;
33 height:176px;
34 overflow: hidden;
35 }
36 .txtDiv{
37 text-align:center;
38 color:blue;
39 }
40 </style>
41
42 <script type="text/javascript">
43
44 function onUploadImgChange(sender,showImgId,showImgDivid,maxSize){
45 if( !sender.value.match( /.jpg|.gif|.png|.bmp/i ) ){
46 alert('圖片格式無效！');
47 return false;
48 }
49 var browserVersion = window.navigator.userAgent.toUpperCase(); //瀏覽器版本信息
50
51 var objPreview = document.getElementById(showImgId);
52 var objPreviewFake = document.getElementById(showImgDivid);
53 var objPreviewSizeFake = document.getElementById('preview_size_fake');
54 if( sender.files && sender.files[0] ){
55 objPreview.style.display = 'block';
56 objPreview.style.width = 'auto';
57 objPreview.style.height = 'auto';
58 // Firefox 因安全性問題已無法直接通過 input[file].value 獲取完整的文件路徑
59 //objPreview.src = sender.files[0].getAsDataURL();
60 if (browserVersion.indexOf("FIREFOX") > -1) { //火狐瀏覽器
61 var firefoxVersion = parseFloat(window.navigator.userAgent.toLowerCase().match(/firefox\/([\d.]+)/)[1]);
62 if (firefoxVersion < 7) {//firefox7.0以下版本
63 objPreview.src = sender.files[0].getAsDataURL();
64 } else {//火狐7.0以上版本
65 objPreview.src = window.URL.createObjectURL(sender.files[0]);
66 }
67 }else if(typeof FileReader !== "undefined"){
68 //兼容chrome、火狐等，HTML5獲取路徑
69 var reader = new FileReader();
70 reader.onload = function(e){
71 objPreview.setAttribute("src",e.target.result);
72 }
73 reader.readAsDataURL(sender.files[0]);
74 }else if(browserVersion.indexOf("SAFARI")>-1){
75 alert("暫時不支持Safari瀏覽器!");
76 }else{
77 objPreview.src = sender.files[0].getAsDataURL();
78 }
79 }else if( objPreviewFake.filters ){
80 // IE7,IE8 在設置本地圖片地址為 img.src 時出現莫名其妙的后果
81 //（相同環境有時能顯示，有時不顯示），因此只能用濾鏡來解決
82 // IE7, IE8因安全性問題已無法直接通過 input[file].value 獲取完整的文件路徑
83 sender.select();
84 sender.blur();//IE9安全機制，必須失去焦點才能取得值
85 var imgSrc = document.selection.createRange().text;
86 objPreviewFake.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc;
87 objPreviewSizeFake.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc;
88 autoSizePreview( objPreviewFake,objPreviewSizeFake.offsetWidth, objPreviewSizeFake.offsetHeight );
89 objPreview.style.display = 'none';
90 }
91 }
92
93 function onPreviewLoad(sender){
94 autoSizePreview( sender, sender.offsetWidth, sender.offsetHeight );
95 }
96 //設置圖片大小
97 function autoSizePreview( objPre, originalWidth, originalHeight ){
98 var zoomParam = ImgZoomParam( 176, 176, originalWidth, originalHeight );
99 objPre.style.width = zoomParam.width + 'px';
100 objPre.style.height = zoomParam.height + 'px';
101 objPre.style.marginTop = zoomParam.top + 'px';
102 objPre.style.marginLeft = zoomParam.left + 'px';
103 }
104 //按比例放縮
105 function clacImgZoomParam( maxWidth, maxHeight, width, height ){
106 var param = { width:width, height:height, top:0, left:0 };
107 if( width>maxWidth || height>maxHeight ){
108 rateWidth = width / maxWidth;
109 rateHeight = height / maxHeight;
110 if( rateWidth > rateHeight ){
111 param.width = maxWidth;
112 param.height = height / rateWidth;
113 }else{
114 param.width = width / rateHeight;
115 param.height = maxHeight;
116 }
117 }
118 param.left = (maxWidth - param.width) / 2;
119 param.top = (maxHeight - param.height) / 2;
120 return param;
121 }
122 //鋪滿最大值
123 function ImgZoomParam( maxWidth, maxHeight, width, height ){
124 var param = { width:width, height:height, top:0, left:0 };
125 param.width = maxWidth;
126 param.height = maxHeight;
127 param.left = 1;
128 param.top = 1;
129 return param;
130 }
131 </script>
132 圖片一：<input type="file" id="img_01" size="28" onchange="onUploadImgChange(this,'preview','preview_fake',100)"/><br/>
133 圖片二：<input type="file" id="img_02" size="28" onchange="onUploadImgChange(this,'preview2','preview_fake2',100)"/><br/>
134 圖片三：<input type="file" id="img_03" size="28" onchange="onUploadImgChange(this,'preview3','preview_fake3',100)"/><br/>
135
136 <!-- <input name="localfile" type="file" id="img_01" size="28" οnchange="onUploadImgChange(this,'preview','preview_fake',100)"/> 以下是預覽圖片用的-->
137 <div id="kk">
138 <table id="imgTb" >
139 <tr>
140 <td>
141 <div class="preview_wrapper">
142 <div id="preview_fake" class="preview_fake">
143 <img id="preview" src="" class="preview" onload="onPreviewLoad(this)"/>
144 </div>
145 </div>
146 <div class="txtDiv">圖片一</div>
147 </td>
148 <td>
149 <div class="preview_wrapper">
150 <div id="preview_fake2" class="preview_fake">
151 <img id="preview2" src="" class="preview" onload="onPreviewLoad(this)"/>
152 </div>
153 </div>
154 <div class="txtDiv">圖片二</div>
155 </td>
156 <td>
157 <div class="preview_wrapper">
158 <div id="preview_fake3" class="preview_fake">
159 <img id="preview3" src="" class="preview" onload="onPreviewLoad(this)"/>
160 </div>
161 </div>
162 <div class="txtDiv">圖片三</div>
163 </td>
164 </tr>
165 </table>
166 <img id="preview_size_fake" />
167 </div>
168 </p>
169 </body>
170 </html>
兼容瀏覽器IE6,IE7,IE8,IE9,Firefox,chrome,360等瀏覽器
效果如下：
轉載于:https://www.cnblogs.com/loklook123/archive/2013/03/19/2968477.html
總結
- 上一篇： 在Oracle中如何让SELECT查询绕
- 下一篇： Socket编程之简单介绍