伪主动触发input:file的click事件

最新推荐文章于 2022-06-21 11:00:00 发布

weixin_33693070

最新推荐文章于 2022-06-21 11:00:00 发布

阅读量1.3k

点赞数

原文链接：https://segmentfault.com/a/1190000004084971

版权

背景

从前，input:file是不能主动触发click事件的，据说是安全方面的考虑。因此，在美化input:file的时候就麻烦了，最通用的方案是，制作一个经过美化后的<button>，然后把input:file调整好尺寸，覆盖在<button>上方，然后再设置 opacity: 0;，如此一来，用户看到的是<button>，点击的却其实是input:file。

html5允许在click事件的callback中主动出发input:file的click事件

考虑一下下面的HTML：

<input type="file" id="fileElem" multiple accept="image/*" style="display：none" onchange="handleFiles(this.files)">
<a href="#" id="fileSelect">Select some files</a>

为自定义的按钮绑定click事件：

var fileSelect = document.getElementById("fileSelect"),
    fileElem = document.getElementById("fileElem");

fileSelect.addEventListener("click", function (e) {
  if (fileElem) {
    fileElem.click();
  }
  e.preventDefault(); // prevent navigation to "#"
}, false);

如此一来，虽然input:file还是必要的，但就没必要说覆盖在<button>上方，随便找个地方隐藏掉就好了，实在是方便了许多。