原生JavaScript/js模拟点击事件,input[type="file"]应用
标签:
JavaScript
应用场景:模拟input[type="file"]点击事件
说明:我们在做一个图片上传时,如果直接使用<input type="file">显示在页面上,UI样式比较难控制,所有这里我们就自定义一个按钮,当点击按钮button时,触发<input type="file">点击事件。
html代码:
<button id="buttonName" type="button">选择图片</button>
<input type="file" style="display: none">
javascript代码:
var btnNode = document.getElementById('buttonName');
btnNode.addEventListener('click', function (e) {
// 模拟input点击事件
var evt = new MouseEvent("click", {
bubbles: false,
cancelable: true,
view: window
});
inputNode.dispatchEvent(evt);
}, false);
MouseEvent:
https://developer.mozilla.org/zh-CN/docs/Web/API/MouseEvent
点击查看更多内容
2人点赞
评论
共同学习,写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦