通过button控制input控件上传文件

最新推荐文章于 2022-08-23 14:59:41 发布

ykyexin

最新推荐文章于 2022-08-23 14:59:41 发布

阅读量895

点赞数

CC 4.0 BY-SA版权

分类专栏： html 文章标签： input透明度上传视频 button

本文链接：https://blog.youkuaiyun.com/dengfangfang11/article/details/40351929

html 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何通过HTML和CSS技巧，实现input-file控件的点击事件，以此来代替直接通过JS修改其value值进行文件上传，确保安全性和用户体验。

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

出于安全方面的考虑，通过JS修改input-file的value是无法正确上传文件的，只有当鼠标真正单击在上传控件的浏览按钮所添加的文件才可以上传。

因此采用定位的方式，将input控件与button放在同一位置上，将input设为透明后，虽然我们只能看到button，但是input控件实际上是位于上一层。所以当点击的时候是触发的input的点击事件。

demo.html:

<html>
	<head>
	<style type="text/css">
		div{position:relative;}
		input{width:100px; height:30px; border:1px solid red; position:absolute;opacity:0;}
		button{width:100px; height:30px;}
	</style>
	</head>
	<body>
		<div>
			<input type="file" onchange="alert('上传成功')"/>
			<button>上传视频</button>
		</div>
	</body>
</html>