上传图片 

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>

	</style>

	<body>
		<div class="upload_box">
			<b>上传图片</b>
			<input type="file" name="file" id="file" accept="image/*" onchange="imgChange(this);" />
			<!--文件上传选择按钮-->
			<div id="preview">
				<img id="imghead" src="img/timg.jpg" width="260" height="180" />
				<!--图片显示位置-->
			</div>
		</div>
	</body>

</html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script type="text/javascript">
	// 选择图片显示
	function imgChange(obj) {
		//获取点击的文本框
		var file = document.getElementById("file");
		var imgUrl = window.URL.createObjectURL(file.files[0]);
		var img = document.getElementById('imghead');
		img.setAttribute('src', imgUrl); // 修改img标签src属性值
		console.log(imgUrl,666)
	};
</script>
<!--精灵end*-->
posted @ 2020-04-28 17:27  FancyAnnaYL  阅读(130)  评论(0)  编辑  收藏  举报