整理 IE 7、8预览本地图片和获取本地图片大小

最新推荐文章于 2022-03-03 16:08:32 发布

转载最新推荐文章于 2022-03-03 16:08:32 发布 · 149 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/houdejun214/archive/2009/11/17/1604496.html

文章标签：

#javascript #ViewUI

本文介绍了一种在IE浏览器中预览本地图片并获取其尺寸的方法，并针对IE7和IE8的安全限制提供了代码解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文不是讨论技术问题，只是将现有的关于图片预览方面的javascript 代码进行整理，希望对那些不知道这方面知识的朋友有些帮助

问题原因

在ie6我们要预览一个本地文件只需要这样既可实现：

Code
1

<html>
2

<head>
3

//预览照片
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

if(picsrc.toLowerCase().indexOf("http://") > - 1)

{
24

alert("必须提供本机硬盘上的图片上传！");
25

return false;
26

}
27

alert("照片宽："+width+"像素 \n照片高："+height+"像素");
28

}
30

</script>
31

</head>
32

<body>
34

<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

　　// 获取本地上传的照片路径
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

if(photo.toLowerCase().indexOf("http://") > - 1)

{
79

alert("必须提供本机硬盘上的图片上传！");
80

return false;
81

}
82

alert("照片宽："+width+"像素 \n照片高："+height+"像素");
84

}
86

</script>
87

</head>
88

<body>
90

<div id="preview" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale); width:160px;height:180px;border:solid 1px black;">
92

</div>
93

<input id="photo_select" type="file" onchange="previewPhoto()" />
95

<input type="button" value="校验照片大小" onclick="checkPhoto()" />
97

</body>
99

100

</html>
101

上面的代码有个缺陷：只能在ie上运行，其他浏览器上直接指定img标签的src既可显示图片，只是要获取上传文件的路径要使用我上面的getPath的方法获取既可

转载于:https://www.cnblogs.com/houdejun214/archive/2009/11/17/1604496.html