原生JavaScript/js模擬點(diǎn)擊事件,input[type="file"]應(yīng)用
標(biāo)簽:
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
點(diǎn)擊查看更多內(nèi)容
2人點(diǎn)贊
評論
評論
共同學(xué)習(xí),寫下你的評論
評論加載中...
作者其他優(yōu)質(zhì)文章
正在加載中
感謝您的支持,我會繼續(xù)努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進(jìn)行掃碼打賞哦