onclick事件触发 input type=“file” 上传文件

添加按钮：

　　

 

< script  type = "text/javascript" >
function openBrowse(){
　　var ie=navigator.appName=="Microsoft Internet Explorer" ? true : false;
　　if(ie){
　　　　document.getElementById("file").click();
　　}else{
　　　　var a=document.createEvent("MouseEvents");//FF的处理
　　　　a.initEvent("click", true, true);
　　　　document.getElementById("file").dispatchEvent(a);
　　}
}
script >

考虑一下下面的HTML：

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

为自定义的按钮绑定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还是必要的，但就没必要说覆盖在上方，随便找个地方隐藏掉就好了，实在是方便了许多。