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

背景

从前,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
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞