自定义上传控件实现

最新推荐文章于 2025-07-09 14:46:15 发布

ZeroJsus

最新推荐文章于 2025-07-09 14:46:15 发布

阅读量369

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： Js存档

所有原创文章版权归作者所有，如有转载请联系作者获得授权

本文链接：https://blog.youkuaiyun.com/u012864465/article/details/84099660

前端专栏收录该内容

22 篇文章

订阅专栏

本文介绍如何利用HTML5的FileReader API实现图片上传预览功能，通过监听input元素的change事件，读取用户选择的文件，并将其转换为Data URL格式显示在页面上。

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

FileReader 对象

存档方便以后拿来即用可以集成 canvas图片裁剪进行实现

<input type="file" value="提交" id="file">
<button id="btn">上传图片并预览</button>

input{
	display: none;
}
button{
	outline: none;
	border: none;
	border: 1px solid #000;
	border-radius: 10px;
	padding: 13px 15px;
	cursor: pointer;
}
button:hover{
	box-shadow: 0 0 10px #333;
}

let input = document.getElementById('file');
input.addEventListener('change', function(e){
	let target = e.target;
	let file = target.files[0];
	// 使用FileReader对象
	let reader = new FileReader();
	reader.readAsDataURL(file);
	reader.addEventListener('load', ()=>{
		let img = new Image();
		img.style.cssText = "width: 400px;height: 400px;display: block";
		// 生成图片此处处理图片信息
		img.src = reader.result;
		img.onload = function() {
			document.body.appendChild(img);
		}
	})
})

// 模拟点击
document.getElementById('btn').addEventListener('click',function(){
	input.click()
})