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


         出于安全方面的考虑,通过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>



发布了27 篇原创文章 · 获赞 9 · 访问量 4万+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章