图片预览

 

<!DOCTYPE html>  
 <html>  
<head>  
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<script src="http://misc.xxx.com/js/jquery.js"></script>	
<style type="text/css">  
 #preview, .img, img  
 {  
 width:200px;  
 height:200px;  
 }  
 #preview  
 {  
border:1px solid #000;  
}  
 </style>  
 </head>  
 <body onload=''>  
	 <a href="http://www.baidu.com" id="cli">点击</a>
 <div id="preview"></div>  
<input type="file" onchange="preview(this)" />  
 <script type="text/javascript">    
 function preview(file)  
 {  
 var prevDiv = document.getElementById('preview');  
 if (file.files && file.files[0])  
 {  
 var reader = new FileReader();  
 reader.onload = function(evt){  
 prevDiv.innerHTML = '<img src="' + evt.target.result + '" />';  
}    
 reader.readAsDataURL(file.files[0]);  
}  
 else    
 {  
 prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';  
 }  
 }  
 var refreshImg = function(_this){
		if(parseInt($(_this).attr('data_num'))>10) return;
		$(_this).attr('data_num',parseInt($(_this).attr('data_num'))+1);
		var imgUrl = $(_this).attr('data_imgurl');
		$(_this).attr('src',"http://pic8.xxx.com/"+ (imgUrl?imgUrl:'')+'?'+new Date().getTime());
	};
 $(function(){
	/*$('img').error(function() {
		//alert(new Date().getTime());
		$(this).attr('src','http://pic11.xxx.com/product/500/500/00/31/11830031_4.jpg');
	});*/
	
	/*$("#testImg").error(function() {
		var _this = this;
		setTimeout(function(){
			refreshImg(_this);
		},500);
	});*/
	$('body').append("<img id='testImg2' src='http://yyy.xxx.com/xxx.jpg' />");
	$("#testImg2").live('error',function() {
		
		var _this = this;
		setTimeout(function(){
			refreshImg(_this);
		},500);
	});
 });
 
 </script>  

 
   <script type="text/javascript">    
	/*$("#testImg").error(function() {
		
		var _this = this;
		setTimeout(function(){
			refreshImg(_this);
		},500);
	});*/
</script>  
 </body>  
 </html>

 

如下：　　

点

 

posted @ 2017-04-19 15:04  zbjice  阅读(136)  评论(0)    收藏  举报