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

最新推荐文章于 2023-09-08 01:26:47 发布

木子金丰

最新推荐文章于 2023-09-08 01:26:47 发布

阅读量2.7w

点赞数 5

本文链接：https://blog.csdn.net/u010509052/article/details/48711287

版权

最近项目需求，不显示一个传统的文件选择，实现一个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" ο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事件异步带来的问题。