html5头像上传_html5 上传头像-CSDN博客

这个博客展示了如何使用HTML5实现头像上传功能。通过创建一个简单的网页，结合JavaScript和Canvas元素，实现了图片预览和裁剪。当用户选择图片文件后，代码会检查文件类型是否为图片，并将其转换为Data URL，然后在Canvas上绘制，提供上传前的预览效果。

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

学习做笔记

附代码

<!DOCTYPE html>
<html>
 
	<head>
		<meta charset="utf-8">
		<title>html5上传头像</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1, minimum-scale=1,user-scalable=no">
		<meta name="keywords" content="">
		<meta name="description" content="">
		<style type="text/css">
			.con4 {
				width: 300px;
				height: auto;
				overflow: hidden;
				margin: 20px auto;
				color: #FFFFFF;
			}
			
			.con4 .btn {
				width: 100%;
				height: 40px;
				line-height: 40px;
				text-align: center;
				background: #d8b49c;
				display: block;
				font-size: 16px;
				border-radius: 5px;
			}
			
			.upload {
				float: left;
				position: relative;
			}
			
			.upload_pic {
				display: block;
				width: 100%;
				height: 40px;
				position: absolute;
				left: 0;
				top: 0;
				opacity: 0;
				border-radius: 5px;
			}
			
			#cvs {
				border: 1px solid #000;
				margin: 20px 0 20px 50px;
			}
		</style>
	</head>
 
	<body>
		<div class="con4">
			<canvas id="cvs" width="200" height="200"></canvas> <span class="btn upload">上传头像<input type="file" class="upload_pic" id="upload" /></span>
		</div>
		<script>
			//获取上传按钮
			var input1 = document.getElementById("upload");
			if(typeof FileReader === 'undefined') {
				//result.innerHTML = "抱歉，你的浏览器不支持 FileReader"; 
				input1.setAttribute('disabled', 'disabled');
			} else {
				input1.addEventListener('change', readFile, false);
 
			}
 
			function readFile() {
				var file = this.files[0]; //获取上传文件列表中第一个文件
				if(!/image\/\w+/.test(file.type)) {
					//图片文件的type值为image/png或image/jpg
					alert("文件必须为图片！");
					return false;
				}
				// console.log(file);
				var reader = new FileReader(); //实例一个文件对象
				reader.readAsDataURL(file); //把上传的文件转换成url
				//当文件读取成功便可以调取上传的接口
				reader.onload = function(e) {
 
					var image = new Image();
					// 设置src属性 
					image.src = e.target.result;
					var max = 200;
					// 绑定load事件处理器，加载完成后执行，避免同步问题
					image.onload = function() {
						// 获取 canvas DOM 对象 
						var canvas = document.getElementById("cvs");
						// 获取 canvas的 2d 环境对象, 
						var ctx = canvas.getContext("2d");
						// canvas清屏 
						ctx.clearRect(0, 0, canvas.width, canvas.height);
 
						ctx.drawImage(image, 0, 0, 200, 200);
						
					};
				}
			};
		</script>
	</body>
 
</html>