出於安全方面的考慮,通過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>