整理 IE 7、8预览本地图片和获取本地图片大小
本文不是讨论技术问题，只是将现有的关于图片预览方面的javascript 代码进行整理，希望对那些不知道这方面知识的朋友有些帮助
问题原因
在ie6我们要预览一个本地文件只需要这样既可实现：
Code1
<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的安全控制，在访问本地一些文件时不允许直接访问，导致上面的代码可能无法正常运行，这种情况如果需要预览照片和获取图片大小
需要更改代码如下
Code1
<html>2
<head>3
<script>4
// 获取本地上传的照片路径5
function getPath(obj) {6
if (obj) {7
//ie8
if (window.navigator.userAgent.indexOf("MSIE") >= 1) {9
obj.select();10
// IE下取得图片的本地路径11
return document.selection.createRange().text;12
}13
//firefox14
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
return30
}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、856
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的方法获取既可
浙公网安备 33010602011771号