图片本地预览 

<!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>   
</head>
<body>

<input type="file" onchange="preview(this)" />

<div id="preview"></div>

<script type="text/javascript">
	function preview(fileInput){
		var div = document.getElementById('preview');
		if(fileInput.files && fileInput.files.length){
			div.innerHTML = '<img id="img-preview" />';
			var img = document.getElementById('img-preview');
			var reader = new FileReader();
			reader.onload = function(evt){
				img.src = evt.target.result;
			}
			reader.readAsDataURL(fileInput.files[0]);
		}else{
			var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
            fileInput.select();
            var src = document.selection.createRange().text;
            div.innerHTML = '<img id=img-preview>';
            var img = document.getElementById('img-preview');
			img.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image)';
            img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
            //var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
            //status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);
            //div.innerHTML = "<div id=divhead style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"'></div>";
			div.innerHTML = "<div id='divhead' style='width:100px;height:100px;margin-top:0px;"+sFilter+src+"\"'></div>";
		}
	}
</script>

</body>
</html>

　　

posted on 2013-12-16 12:07  撒尿去了  阅读(68)  评论(0)    收藏  举报

导航