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

原创已于 2024-01-31 09:23:47 修改 · 3k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#js #图片上传

于 2018-03-23 23:13:15 首次发布

web 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了一个使用HTML、CSS及JavaScript(jQuery)实现的文件上传功能，允许用户上传最多五张图片，并实时预览已选择的图片。代码中包含了基本的HTML布局、样式设置以及通过JavaScript实现的文件读取和图片显示逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、html布局

<!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>