html5系列：伪主动触发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>

上方，随便找个地方隐藏掉就好了，实在是方便了许多。