jQuery实现图片上传预览详解编程语言

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>

原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/8542.html

(0)
上一篇 2021年7月18日
下一篇 2021年7月18日

相关推荐

发表回复

登录后才能评论