IT虾米网

jQuery实现图片上传预览详解

itxm 2018年06月24日 编程语言 307 0

2.html       

<!DOCTYPE html> 
<html lang="en"> 
<head> 
	<meta charset="UTF-8"> 
	<title>Document</title> 
	<script type="text/javascript" src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> 
	<script type="text/javascript"> 
	$(function(){ 
		$(".file").change(function(){ 
			var fileImg = $(".fileImg"); 
			var explorer = navigator.userAgent; 
			var imgSrc = $(this)[0].value; 
			if (explorer.indexOf('MSIE') >= 0) { 
				if (!/\.(jpg|jpeg|png|JPG|PNG|JPEG)$/.test(imgSrc)) { 
					imgSrc = ""; 
					fileImg.attr("src","/img/default.png"); 
					return false; 
				}else{ 
					fileImg.attr("src",imgSrc); 
				} 
			}else{ 
				if (!/\.(jpg|jpeg|png|JPG|PNG|JPEG)$/.test(imgSrc)) { 
					imgSrc = ""; 
					fileImg.attr("src","/img/default.png"); 
					return false; 
				}else{ 
					var file = $(this)[0].files[0]; 
					var url = URL.createObjectURL(file); 
					fileImg.attr("src",url); 
				} 
			} 
		}) 
	}) 
	</script> 
</head> 
<body> 
	<form enctype="multipart/form-date" method="post"> 
		<input type="file" class="file"> 
		<input type="submit" class="sub"> 
	</form> 
	<img src="" class="fileImg"> 
</body> 
</html>
发布评论

分享到:

IT虾米网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

jQuery实现滚动时动态加载页面内容详解
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。