上传文件域隐藏实例

最新推荐文章于 2022-04-19 21:05:45 发布

itdragons

最新推荐文章于 2022-04-19 21:05:45 发布

阅读量967

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/itdragons/article/details/53673645

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

效果：

源码（兼容IE、360、谷歌）：

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
</head> 
<body> 
<div> 
<form id="form1" name="form1" enctype="multipart/form-data" method="post" action="1.php"> 
<input type="file" id="file"name="file" style="display:none""/> 
<input type="button" name="button" value="点我就像点击上传文件“浏览”按钮一样" οnclick="javascript:openBrowse();"/>
<span style="" id="fileName"></span>
</form> 
</body> 
<script type="text/javascript"> 
	var fileName ;
	function openBrowse() {
		var ie=navigator.appName=="Microsoft Internet Explorer" ? true : false; 
		if(ie){
			document.getElementById("file").click(); 
			document.getElementById("fileName").innerText=document.getElementById("file").value;
		}else{
			var a=document.createEvent("MouseEvents");
			a.initEvent("click", true, true);  
			document.getElementById("file").dispatchEvent(a); 
			interval = setInterval(monitorFile,1000);//每1秒调用一次
		}
	} 
	
	function monitorFile(){
		var newFileName = document.getElementById("file").value;
		if(newFileName != null && newFileName != ""){
			if(newFileName != fileName){
				fileName = document.getElementById("file").value;
				document.getElementById("fileName").innerText = "上传附件：" + fileName;
			}
		}
	}
</script> 
</html>