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

最新推荐文章于 2023-10-13 21:36:47 发布

ykyexin

最新推荐文章于 2023-10-13 21:36:47 发布

阅读量836

点赞数

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

本文链接：https://blog.csdn.net/dengfangfang11/article/details/40351929

版权

html 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

出于安全方面的考虑，通过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" οnchange="alert('上传成功')"/>
			<button>上传视频</button>
		</div>
	</body>
</html>