实现原生button上传文件

最新推荐文章于 2024-06-04 17:35:28 发布

原创最新推荐文章于 2024-06-04 17:35:28 发布 · 781 阅读

1 ·

CC 4.0 BY-SA版权

原生专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一种使用HTML和JavaScript实现的头像上传与实时预览功能。通过监听文件输入变化，利用FileReader API读取图片文件并将其转换为Data URL，然后更新页面上图片元素的源，实现即时预览效果。

<img id="head_img" src="./11.jpg" style="width: 100%;height: 100%;" alt="">

<input type="file" name="xx" id="upload_head_img" style="display:none" />
<input type="button" value="修改头像" id="btn" class="btn" style="width: 140px;height: 40px;" onclick="document.getElementById('upload_head_img').click();" />


document.getElementById("upload_head_img").addEventListener("change",(e)=>{
					// console.log(e.target.files[0])
					var reader = new FileReader(); 
					 reader.readAsDataURL(e.target.files[0]);  
						reader.onload = function(){  
						// console.log(reader.result); 
						 document.getElementById("head_img").src = reader.result
					}  
				})