js点击某个图标或按钮弹出文件选择框

来源：互联网发布：淘宝内部优惠券秒杀编辑：程序博客网时间：2024/06/05 00:33

最近项目需求，不显示一个传统的文件选择，实现一个js点击某个图标或按钮，弹出文件选择框，选择完图片后，回显选择的图片。但是编写的过程中，出现不少问题，我总结一下。

废话不说了，上代码再说问题。

<HTML><head><script type="text/javascript" src="script/jquery-1.6.2.min.js"></script><script type='text/javascript'>    function selectFile(){    //触发 文件选择的click事件    $("#file").trigger("click");//其他code如 alert($("#file").attr("value"))    }        /* 获取 文件的路径 ，用于测试*/    function getFilePath(){    alert($("#file").attr("value"));    }</script></head><body><!-- 给这个input 设置样式隐藏，切忌不可用display控制隐藏,可能不能跨浏览器 --><input type="file" id="file" onchange="getFilePath()" style="filter:alpha(opacity=0);opacity:0;width: 0;height: 0;"/> <button onclick="selectFile();">select file</button><button onclick="getFilePath()">get FilePath</button></body></html>

$("#file").trigger("click"); 触发<input type="file" id="file" />的click事件，在ie下trigger事件和其他代码是同步执行的，但是在谷歌和火狐是异步执行的，//其他code如 alert($("#file").attr("value")) 是得不到的。为了让其他浏览器兼容，其实选择完文件后触发的是 file 的 onchange="getFilePath()" ，你就可以在选择完文件后做你自己的业务处理。
说白了，都是trigger事件异步带来的问题。

0 2