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

客官°小女子只卖身不卖艺 2022-08-08 17:58 601阅读 0赞

最近项目需求，不显示一个传统的文件选择，实现一个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 type="file" id="file" οnchange="getFilePath()" 
    			style="filter:alpha(opacity=0);opacity:0;width: 0;height: 0;"/> 
    		<button οnclick="selectFile();">select file</button>
    		<button οnclick="getFilePath()">get FilePath</button>
    	</body>
    </html>

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