h5 formData多张图片上传预览

晨晨快跑

已于 2022-04-14 12:03:54 修改

阅读量2k

点赞数

CC 4.0 BY-SA版权

分类专栏：技术文章标签： js h5 formData

于 2018-03-15 10:10:39 首次发布

本文链接：https://blog.youkuaiyun.com/baidu_38027860/article/details/79563940

技术专栏收录该内容

118 篇文章

订阅专栏

本文介绍了一个使用HTML和jQuery实现的简单图片上传示例。该示例通过一个蓝色按钮触发文件选择对话框，并允许用户上传多个图片文件。上传的图片会进行格式验证，确保为常见的图片格式（如.jpg、.gif、.png、.bmp），然后通过Ajax发送到服务器。

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

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<title>上传图片</title>
	<script src="https://unpkg.com/jquery@3.1.0/dist/jquery.min.js"></script>
</head>

<style>
	#container {
		width: 100%;
		margin-top: 40px;
		position: relative;
	}

	#container>.shangchuan {
		width: 200px;
		height: 100px;
		background: blue;
		color: #fff;
		font-size: 16px;
		position: relative;
		line-height: 100px;
		text-align: center;
	}

	#container>.shangchuan>input {
		opacity: 0;
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		cursor: pointer;
	}

	#container>#juedui {
		padding: 30px;
		position: relative;

	}

	#container>#juedui>div {
		width: 100px;
		margin-bottom: 30px;
	}

	#container>#juedui>div>img {
		width: 100%;
	}
</style>

<body>

	<div id="container">
		<div class="shangchuan">
			点击此处上传图片
			<input type="file" name="file" id="file_input" multiple />
		</div>
		<div id="juedui"></div>
	</div>
</body>

<script>
	window.onload = function () {
		var input = document.getElementById("file_input");
		var result, div;
		if (typeof FileReader === 'undefined') {
			result.innerHTML = "抱歉，你的浏览器不支持 FileReader";
			input.setAttribute('disabled', 'disabled');
		} else {
			input.addEventListener('change', readFile, false);
		}

		function readFile() {
			var formData = new FormData();

			for (var i = 0; i < this.files.length; i++) {
				if (!input['value'].match(/.jpg|.gif|.png|.bmp/i)) {　　//判断上传文件格式   
					return alert("上传的图片格式不正确，请重新选择")
				}
				formData.append('files', this.files[i]);
			}

			$.ajax({
				url: 'url',
				type: 'POST',
				data: formData,
				contentType: false,
				processData: false,
				success: function (json) {
					var list = json.payload;
					for (var i = 0; i < list.length; i++) {
						var url = list[i];
						var result = '<img src="' + url + '" alt=""/><p>' + url + '</p>';
						div = document.createElement('div');
						div.innerHTML = result;
						document.getElementById('juedui').appendChild(div);
					}
				}
			});
		}
	}

</script>

</html>

效果图：