整理 IE 7、8预览本地图片和获取本地图片大小
本文不是讨论技术问题,只是将现有的关于图片预览方面的javascript 代码进行整理,希望对那些不知道这方面知识的朋友有些帮助
问题原因
在ie6我们要预览一个本地文件只需要这样既可实现:
Code
1<html>
2<head>
3 <script>
4
5 //预览照片
6 function previewPhoto(){
7 var picsrc=document.all.photo_select.value;
8 var picimg=document.all.picimgage;
9 picimg.src=picsrc;
10 }
11 //校验图片大小
12 function checkPhoto(){
13 var picsrc=document.all.photo_select.value;
14 if(!picsrc){
15 alert("请选择一个本地图片文件!");
16 return;
17 }
18 var imgObj = new Image();
19 imgObj.src = picsrc;
20 var width = imgObj.width;
21 var height = imgObj.height;
22
23 if(picsrc.toLowerCase().indexOf("http://") > - 1){
24 alert("必须提供本机硬盘上的图片上传!");
25 return false;
26 }
27 alert("照片宽:"+width+"像素 \n照片高:"+height+"像素");
28
29 }
30 </script>
31</head>
32
33<body>
34
35<div id="preview">
36 <img id="picimgage" style="width:160px;height:180px;border:solid 1px black;" />
37</div>
38<input id="photo_select" type="file" onchange="previewPhoto()" />
39<input type="button" value="校验照片大小" onclick="checkPhoto()" />
40</body>
41</html>
42
1<html>
2<head>
3 <script>
4
5 //预览照片
6 function previewPhoto(){
7 var picsrc=document.all.photo_select.value;
8 var picimg=document.all.picimgage;
9 picimg.src=picsrc;
10 }
11 //校验图片大小
12 function checkPhoto(){
13 var picsrc=document.all.photo_select.value;
14 if(!picsrc){
15 alert("请选择一个本地图片文件!");
16 return;
17 }
18 var imgObj = new Image();
19 imgObj.src = picsrc;
20 var width = imgObj.width;
21 var height = imgObj.height;
22
23 if(picsrc.toLowerCase().indexOf("http://") > - 1){
24 alert("必须提供本机硬盘上的图片上传!");
25 return false;
26 }
27 alert("照片宽:"+width+"像素 \n照片高:"+height+"像素");
28
29 }
30 </script>
31</head>
32
33<body>
34
35<div id="preview">
36 <img id="picimgage" style="width:160px;height:180px;border:solid 1px black;" />
37</div>
38<input id="photo_select" type="file" onchange="previewPhoto()" />
39<input type="button" value="校验照片大小" onclick="checkPhoto()" />
40</body>
41</html>
42
我们知道由于IE7、8的安全控制,在访问本地一些文件时不允许直接访问,导致上面的代码可能无法正常运行,这种情况如果需要预览照片和获取图片大小
需要更改代码如下
Code
1<html>
2<head>
3 <script>
4 // 获取本地上传的照片路径
5 function getPath(obj) {
6 if (obj) {
7 //ie
8 if (window.navigator.userAgent.indexOf("MSIE") >= 1) {
9 obj.select();
10 // IE下取得图片的本地路径
11 return document.selection.createRange().text;
12 }
13 //firefox
14 else if (window.navigator.userAgent.indexOf("Firefox") >= 1) {
15 if (obj.files) {
16 // Firefox下取得的是图片的数据
17 return obj.files.item(0).getAsDataURL();
18 }
19 return obj.value;
20 }
21 return obj.value;
22 }
23 }
24 //预览照片
25 function previewPhoto(){
26 var picsrc=getPath(document.all.photo_select);
27 var picpreview=document.getElementById("preview");
28 if(!picsrc){
29 return
30 }
31 if(window.navigator.userAgent.indexOf("MSIE") >= 1) {
32 if(picpreview) {
33 try{
34 picpreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = picsrc;
35 }catch(ex){
36 alert("文件路径非法,请重新选择!") ;
37 return false;
38 }
39 }else{
40 picpreview.innerHTML="<img src='"+picsrc+"' />";
41 }
42 }
43 }
44 //校验图片大小
45 function checkPhoto(){
46 var photo = getPath(document.all.photo_select);
47 if(!photo){
48 alert("请选择一个本地图片文件!");
49 return;
50 }
51 var imgObj = new Image();
52 imgObj.src = photo;
53 var width = imgObj.width;
54 var height = imgObj.height;
55 ///获取正确的图片尺寸大小,兼容ie6、7、8
56 try{
57 if((typeof width=="undefined" || width==0) && (typeof height=="undefined" || height==0)){
58 var picpreview=document.getElementById("preview");
59 if(picpreview && picpreview.filters && picpreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src) {
60 var tempDiv=document.createElement("div");
61 picpreview.appendChild(tempDiv);
62 tempDiv.style.width="10px";
63 tempDiv.style.height="10px";
64 tempDiv.style.diplay="none";
65 tempDiv.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);";
66 tempDiv.ID="previewTemp";
67 var url=picpreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src;
68 tempDiv.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src=url;
69 width=tempDiv.offsetWidth;
70 height=tempDiv.offsetHeight;
71 picpreview.removeChild(tempDiv);
72 }
73 }
74 }
75 catch(e){
76 }
77
78 if(photo.toLowerCase().indexOf("http://") > - 1){
79 alert("必须提供本机硬盘上的图片上传!");
80 return false;
81 }
82
83 alert("照片宽:"+width+"像素 \n照片高:"+height+"像素");
84
85 }
86 </script>
87</head>
88
89<body>
90
91<div id="preview" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale); width:160px;height:180px;border:solid 1px black;">
92</div>
93
94<input id="photo_select" type="file" onchange="previewPhoto()" />
95
96<input type="button" value="校验照片大小" onclick="checkPhoto()" />
97
98</body>
99
100</html>
101
1<html>
2<head>
3 <script>
4 // 获取本地上传的照片路径
5 function getPath(obj) {
6 if (obj) {
7 //ie
8 if (window.navigator.userAgent.indexOf("MSIE") >= 1) {
9 obj.select();
10 // IE下取得图片的本地路径
11 return document.selection.createRange().text;
12 }
13 //firefox
14 else if (window.navigator.userAgent.indexOf("Firefox") >= 1) {
15 if (obj.files) {
16 // Firefox下取得的是图片的数据
17 return obj.files.item(0).getAsDataURL();
18 }
19 return obj.value;
20 }
21 return obj.value;
22 }
23 }
24 //预览照片
25 function previewPhoto(){
26 var picsrc=getPath(document.all.photo_select);
27 var picpreview=document.getElementById("preview");
28 if(!picsrc){
29 return
30 }
31 if(window.navigator.userAgent.indexOf("MSIE") >= 1) {
32 if(picpreview) {
33 try{
34 picpreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = picsrc;
35 }catch(ex){
36 alert("文件路径非法,请重新选择!") ;
37 return false;
38 }
39 }else{
40 picpreview.innerHTML="<img src='"+picsrc+"' />";
41 }
42 }
43 }
44 //校验图片大小
45 function checkPhoto(){
46 var photo = getPath(document.all.photo_select);
47 if(!photo){
48 alert("请选择一个本地图片文件!");
49 return;
50 }
51 var imgObj = new Image();
52 imgObj.src = photo;
53 var width = imgObj.width;
54 var height = imgObj.height;
55 ///获取正确的图片尺寸大小,兼容ie6、7、8
56 try{
57 if((typeof width=="undefined" || width==0) && (typeof height=="undefined" || height==0)){
58 var picpreview=document.getElementById("preview");
59 if(picpreview && picpreview.filters && picpreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src) {
60 var tempDiv=document.createElement("div");
61 picpreview.appendChild(tempDiv);
62 tempDiv.style.width="10px";
63 tempDiv.style.height="10px";
64 tempDiv.style.diplay="none";
65 tempDiv.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);";
66 tempDiv.ID="previewTemp";
67 var url=picpreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src;
68 tempDiv.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src=url;
69 width=tempDiv.offsetWidth;
70 height=tempDiv.offsetHeight;
71 picpreview.removeChild(tempDiv);
72 }
73 }
74 }
75 catch(e){
76 }
77
78 if(photo.toLowerCase().indexOf("http://") > - 1){
79 alert("必须提供本机硬盘上的图片上传!");
80 return false;
81 }
82
83 alert("照片宽:"+width+"像素 \n照片高:"+height+"像素");
84
85 }
86 </script>
87</head>
88
89<body>
90
91<div id="preview" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale); width:160px;height:180px;border:solid 1px black;">
92</div>
93
94<input id="photo_select" type="file" onchange="previewPhoto()" />
95
96<input type="button" value="校验照片大小" onclick="checkPhoto()" />
97
98</body>
99
100</html>
101
上面的代码有个缺陷:只能在ie上运行,其他浏览器上直接指定img标签的src既可显示图片,只是要获取上传文件的路径要使用我上面的getPath的方法获取既可