jQuery实现上传图片时,显示图片预览效果

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_39135287/article/details/80468125
代码如下
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>jQuery上传图片时,可以显示图片预览效果</title>
		<script src="js/jquery-3.2.1.min.js"></script>
	</head>

	<body>
		<input id="myfile" type="file"><br/>
		<img src="" id="show" width="200">
		<script type="text/javascript">
			$(function() {

				$("#myfile").change(function() {
					var readFile = new FileReader();
					var mfile = $("#myfile")[0].files[0];  //注意这里必须时$("#myfile")[0],document.getElementById('file')等价与$("#myfile")[0]
					readFile.readAsDataURL(mfile);
					readFile.onload = function() {
						var img = $("#show");
						img.attr("src", this.result);
					}

				});

			})
		</script>
	</body>

</html>

猜你喜欢

转载自blog.csdn.net/qq_39135287/article/details/80468125