jQuery简单图片上传实例

最新推荐文章于 2024-04-17 16:35:15 发布

JunClover

最新推荐文章于 2024-04-17 16:35:15 发布

阅读量2.4k

点赞数 2

文章标签：图片上传

本文链接：https://blog.csdn.net/qq_36342182/article/details/79144868

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
		<style type="text/css">
			#img_input2 {
				display: none;
			}
			#img_label2 {
				background-color: #f2d547;
				border-radius: 5px;
				display: inline-block;
				padding: 10px;
			}
			#preview_box2 img {
				width: 200px;
			}
		</style>
	</head>
	<body>
		<h3>Demo3:label样式</h3>
		<input id="img_input2" multiple="" type="file" accept="image/*" />
		<label for="img_input2" id="img_label2">选择文件
                  <i class="fa fa-plus fa-lg"></i></label>
		<div id="preview_box2"></div>
	</body>
	<script type="text/javascript">
		$("#img_input2").on("change", function(e) {
			var file = e.target.files[0]; //获取图片资源
			// 只选择图片文件
			if(!file.type.match('image.*')) {
				return false;
			}
			var reader = new FileReader();
			reader.readAsDataURL(file); // 读取文件
			// 渲染文件
			reader.onload = function(arg) {
				var img = '<img class="preview" src="' + arg.target.result + '" alt="preview"/>';
				$("#preview_box2").empty().append(img);
			}
		});
	</script>
</html>

JunClover

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jQuery简单图片上传实例

#img_input2 { display: none; } #img_label2 { background-color: #f2d547; border-radius: 5px; display: inline-block; padding: 10px; } #preview_box2 img { width: 200px
复制链接

扫一扫