JS本地图片预览
发布时间：2012-10-05 14:56:56 访问次数：8035 【关闭此页】
实现选择本地图片后预览功能，即可为网页增色不少，又能避免用户误上传。确实是一个值得推荐的功能，但是目前浏览器市场混乱，缺乏统一标准，使得这个功能在开发起来让人有够头疼。忙乎了一中午，但是结果并不乐观，只测试通过了IE6/IE7/IE8/IE9/FireFox/Chrome这几款浏览器，Opera的错误控制台不显示错误，不知道怎么搞的，所以暂时先忽略它吧。至于其它浏览器，本人电脑上没有安装。再者，就算安装更多浏览器也不可能全部兼容。
看来解决兼容问题的唯一办法就是使用Flash了。但是想用Flash实现本地图片预览功能也有很大局限性，比如网页布局、图片类型、图片尺寸限制以及上传接口等等。
贴代码的时候本来想启用在线调试功能，但是IE9对于框架内获取文件域内的地址支持的不是很好，貌似它认为有跨域嫌疑，所以只贴代码，有兴趣的童鞋复制代码自己运行测试吧，代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>本地图片预览</title>
<style type="text/css">
table {
table-layout: fixed;
}
td {
padding: 0 6px;
font-size: 12px;
}
#picWrap {
padding: 4px;
width: 120px;
height: 90px;
overflow: hidden;
color: #aaa;
text-align: center;
border: 1px solid #ddd;
background-color: #f3f3f3;
}
</style>
<script type="text/javascript">
var isIE=/msie/i.test(navigator.userAgent);
var isFF=/firefox/i.test(navigator.userAgent);
function getValue(o){
var str=window.webkitURL&&window.webkitURL.createObjectURL(o.files[0])||window.URL&&window.URL.createObjectURL(o.files[0])||null;
if(str)return str;
o.select();
o.blur();
str=document.selection.createRange().text;
document.selection.empty();
return str;
}
function drawImg(){
var o=document.getElementById('picWrap').firstChild,picSize=document.getElementById('picSize'),W=o.offsetWidth,H=o.offsetHeight,w,h;
if(arguments.length==0&&W==1&&H==1){setTimeout('drawImg()',50);return;}
if(W/H>=120/90){
if(W>120){w=120,h=(H*120)/W}else{w=W,h=H}
}else{
if(H>90){h=90,w=(W*90)/H}else{w=W,h=H}
}
picSize.innerHTML='图片实际尺寸：'+W+'×'+H;
o.style.width=w+'px';
o.style.height=h+'px';
if(arguments.length==0){o.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').sizingMethod='scale';
}else{
arguments[0].width=w;
arguments[0].height=h;
}
}
function checkPic(obj){
var v=obj.value,V=getValue(obj),picWrap=document.getElementById('picWrap'),str='图 片 预 览';
document.getElementById('picSize').innerHTML='';
if(v==''){
picWrap.innerHTML=str;
return;
}
if(/^.+\.jpg$/i.test(v.toLowerCase())){
picWrap.innerHTML='';
if(isIE){
var div=document.createElement('div');
div.style.cssText='width:1px;height:1px;margin:auto';
picWrap.appendChild(div);
div.style.cssText+=";filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image')";
try{
div.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src=V;
}catch(e){
obj.outerHTML=obj.outerHTML;
picWrap.innerHTML=str;
alert('无效的图片文件');
return;
}
setTimeout('drawImg()',50);
}else{
var img=new Image();
img.onload=ImgOK;
img.src=V;
}
}else{
(isIE||window.opera)?obj.outerHTML=obj.outerHTML:obj.value='';
picWrap.innerHTML=str;
alert('图片格式不正确！请选择jpg格式的文件');
}
function ImgOK(){
if(img.width==0){
alert('无效的图片文件');
obj.value='';
picWrap.innerHTML=str;
return;
}
picWrap.appendChild(img);
drawImg(img);
}
}
</script>
</head>
<body>
<table border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="300" align="right"><input name="" type="file" onchange="checkPic(this)" /></td>
<td id="picWrap">图 片 预 览</td>
<td width="300" id="picSize"></td>
</tr>
</table>
</body>
</html>