js/jq模拟点击事件

最新推荐文章于 2024-04-13 00:37:41 发布

原创最新推荐文章于 2024-04-13 00:37:41 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

Javascript 专栏收录该内容

41 篇文章

订阅专栏

本文介绍了一种通过隐藏HTML文件输入框并利用按钮点击触发文件选择的方法。通过使用CSS隐藏文件输入框，并借助jQuery实现按钮点击事件来触发文件选择对话框，这种方式可以提升用户体验并保持界面整洁。

HTML：

<body>
    <input id="ipt" type="file">
    <a id="btn" href="javascript:void(0)">上传</a>
</body>

CSS：

#ipt{display:none;}
#btn{
    text-decoration: none;
    height:14px;
    line-height:14px;
    font-size:12px;
    color:#fff;
    background:#ff6600;
    border-radius:13px;
    display:inline-block;
    padding:4px 10px;
    border:2px solid #ff9933;
    overflow: hidden;
}

js/jq模拟点击事件

JS：

<script src="http://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
<script>
    $('#btn').click(function(){
        $('#ipt').click();
    });
</script>