input 上传多张图片前端界面js交互

<!DOCTYPE html>
<html>


	<head>
		<meta charset="UTF-8">


		<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
		<link rel="stylesheet" href="css/bootstrap.css" />


		<style type="text/css">
			.imgdiv {
				width: 100%;
				height: 200px;
				margin: 10px;
			}
			
			img {
				width: 20%;
				height: 100%;
				padding: 5px;
			}
			
			input {
				margin: 10px;
			}
		</style>


		<script>
		var  flag=0;
			$(function() {
				$("#upload").change(function() {
					flag=flag+1;
					if(flag>5) return;
					var path= getImgPath(this.files[0]);
					console.log("--------"+path);
					uploadImg(path);
				});


			});
			
           //动态显示上传图片
			function uploadImg(path) {
				
				var imgDiv = $("#img-con");


				var $img = $("<img/>");


				$img.attr("src", path);


				imgDiv.append($img);
			}




           //获取要上传单张图片的本地路径
			function getImgPath(file) {


				var url = null;
				if(window.createObjectURL != undefined) { // basic
					url = window.createObjectURL(file);
				} else if(window.URL != undefined) { // mozilla(firefox)
					url = window.URL.createObjectURL(file);
				} else if(window.webkitURL != undefined) { // webkit or chrome
					url = window.webkitURL.createObjectURL(file);
				}
				return url;
			}
		</script>


		<title>文件上传</title>
	</head>


	<body>


		<div id="img-con" class="panel panel-default imgdiv">


		</div>


		<div>
			<span><input type="file" id="upload" />最多上传5张</span>
			
		</div>


	</body>


</html>
下一篇讲解使用springmvc上传多张图片
input 上传多张图片前端界面js交互

猜你喜欢
