头像上传JS

郭郭郭憨憨

于 2022-06-29 11:15:34 发布

阅读量304

点赞数 1

CC 4.0 BY-SA版权

文章标签：大数据

本文链接：https://blog.csdn.net/qq_59494319/article/details/125516699

本文介绍了如何使用HTML和JavaScript实现一个前端文件输入框，限制上传图片的大小并在用户选择合适尺寸的图片后将其显示。关键点包括文件大小验证和Base64转换。

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

代码展示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.preview{
				width: 100px;
				height: 100px;
				position: relative;
				border: 1px solid black;
			}
			.preview img,.preview input{
				width: 100px;
				height: 100px;
				position: absolute;
				top: 0;
				left: 0;
			}
			.preview input{
				opacity: 0;
			}
		</style>
	</head>
	<body>
		<div class="preview">
			<img src="./img/用户.png">
			<input type="file">
		</div>
		<script>
			var input=document.querySelector("input");
			var img=document.querySelector("img");
			input.onchange=function(){
				console.log(this.files);//input里面的文件
				if(this.size>1024*20){//设置图片大小小于20k
					alert("图片尺寸太大,请换一张")
				}else{
					var newFile=new FileReader();//文件读取器
					newFile.readAsDataURL(this.files[0]);//将文件读取为
					// console.log(newFile);
					newFile.onload=function(data){
						console.log(data);
						img.src=data.target.result;
					}
				}	
			}
		</script>
	</body>
</html>