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

2024年2月21日 149次阅读 来源: array_huang

背景

从前，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>上方，随便找个地方隐藏掉就好了，实在是方便了许多。

    原文作者：array_huang
    原文地址: https://segmentfault.com/a/1190000004084971
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞