文章分类

标签导航

JS本地图片预览

发布时间:2012-10-05 14:56:56 访问次数:4823 【关闭此页】

  实现选择本地图片后预览功能,即可为网页增色不少,又能避免用户误上传。确实是一个值得推荐的功能,但是目前浏览器市场混乱,缺乏统一标准,使得这个功能在开发起来让人有够头疼。忙乎了一中午,但是结果并不乐观,只测试通过了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>
本文标签:网页设计JavaScript
首 页|关于我们|网站建设|域名服务|虚拟主机|百度优化|成功案例|资讯中心|联系方式