继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

原生JavaScript/js模拟点击事件,input[type="file"]应用

Capricorncd
关注TA
已关注
手记 17
粉丝 9
获赞 164

应用场景:模拟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

打开App,阅读手记
2人推荐
发表评论
随时随地看视频慕课网APP

热门评论

真麻烦,一个<label for=""></label>就搞定了!

查看全部评论