jQuery实现图片上传预览

2018-07-20    来源:open-open

容器云强势上线!快速搭建集群,上万Linux镜像随意使用

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>

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点!
本站所提供的图片等素材,版权归原作者所有,如需使用,请与原作者联系。

上一篇:C语言最短路径和矩阵乘法.

下一篇:C实现PHP的MySQL数据库连接池