解决谷歌下input type='file'点击取消内容清空问题

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE>解决谷歌下input type='file'点击取消内容清空问题 </TITLE>
 </HEAD>

 <BODY>
 <div id="fileDiv"  onclick="fileClick()">
	<div id="curFileName">选择文件</div>
 </div>
 

  <script>
  var oldFile;
  function fileClick(){
		var fileEle=document.createElement("input"); //创建input
		fileEle.name="myfile";
		fileEle.id="myfile";
		fileEle.type="file";//设置类型为file
		fileEle.style="display:none";
		fileEle.onchange=function(){
			if(fileEle.value==""||null==fileEle.value){
				return;
			}else{
				if(oldFile){
					//删除之前 document.getElementById("myfile")
					document.getElementById("fileDiv").removeChild(oldFile);
					document.getElementById("curFileName").innerHTML ="选择文件";
				}
				//新增一个,一样name的
				oldFile = fileEle;
				document.getElementById("fileDiv").appendChild(fileEle);
				document.getElementById("curFileName").innerHTML +=fileEle.value;
			}
		}
		
		fileEle.click();
	//document.getElementById("fileDiv").innerHTML=' <input id="myfile" type="file" ></input>';
  }
  </script>
 </BODY>
</HTML>

猜你喜欢

转载自blog.csdn.net/myfmyfmyfmyf/article/details/97371836
今日推荐