头像上传

最新推荐文章于 2024-03-15 20:13:51 发布

前端攻城狮_lucky

最新推荐文章于 2024-03-15 20:13:51 发布

阅读量356

点赞数 1

分类专栏： h5 js 文章标签： h5上传图片

本文链接：https://blog.csdn.net/sinat_31597631/article/details/72828562

版权

h5 js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

实现简单的图片上传功能代码简洁易懂

<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>图片上传</title>
		<script id="jquery_183" type="text/javascript" class="library" src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
		<style>
			.imgCom {
				width: 300px;
				height: 300px;
				border: 1px solid #000;
			}
			
			.imgCom> img {
				width: 100%;
				height: 100%;
			}
		</style>
	</head>

	<body>
		<input type="file">
		<div class="imgCom" id="imgCom"></div>
	</body>
	<script>
		//pc移动都兼容
		function previewB(file) {
			var reader = new FileReader(); //创建FileReader对象
			reader.onload = function(e) {
				var $img = $('<img>').attr("src", e.target.result)
				$('#imgCom').empty().append($img)
				console.log($img)
			}
			reader.readAsDataURL(file)
		}

		$('[type=file]').change(function(e) {
			var file = e.target.files[0], //事件目标
				val = $(this).val(),
				reg = /\.(png|jpg|gif|bmp)$/;
				
			if(reg.test(val)) {
				previewB(file)
			} else {
				alert('选择正确格式的图片');
			}
		})
	</script>

</html>