日期:2014-05-16  浏览次数:20299 次

js清空文件选择框的内容

???? 最近在给别人做一个网站,后台要求只能上传flv格式的文件,然后在前台播放。在jsp页面中想用js控制上传文件的类型。下面的代码是js控制上传格式的demo,写在这里作为个人总结。

?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE>清除文件选择框中的内容</TITLE>
  <script type="text/javascript">
	function checkMedia(){
		
	var media = document.getElementById("file").value;
		
	var mediaext = media.substring(media.lastIndexOf("."),media.length);
	mediaext = mediaext.toLowerCase();
	if(mediaext!='.flv'){
		alert("系统不支持的文件格式!\n请选择flv文件。");
			
		 if (document.getElementById("file").outerHTML) {
	            		 document.getElementById("file").outerHTML = document.getElementById("file").outerHTML;
	         	} else { 
	             		document.getElementById("file").value = "";
	         	}

			document.getElementById("file").focus();
	   	}
   
	}
	function check(){
		var fileName = document.getElementById("file");
		
		if(fileName.value==""){
			alert("请选择视频文件!");
			return false;
		}
		return true;
	}
  </script>
 </HEAD>

 <BODY>
  <p>上传视频</p>
  <form onsubmit="return check()">
	<input type="file" name="file" id="file" onchange="checkMedia()" />
	<input type="submit" value="提交" />
  </form>
 </BODY>
</HTML>

?

清空的原因很简单,就一句话:

document.getElementById("file").outerHTML = document.getElementById("file").outerHTML;

如果没有选文件,即file是空的 document.getElementById("file").outerHTML的结果是 :

"<input type=“file”?name="file" id=“file” />"

document.getElementById("file").outerHTML = document.getElementById("file").outerHTML;

这个很好理解,自己付给自己,最后还是自己。如果file有值了,比如D:\ebook\test.txt 那么document.getElementById("file").outerHTML的值为:

<input type="file" name="file" id="file" value="D:\ebook\test.txt"/>

这时

document.getElementById("file").outerHTML = document.getElementById("file").outerHTML;

后?document.getElementById("file")也清空

这是因为file控件是只读的,用js给file控件赋值是没用的。

如果我们将上面代码中的:

<input type="file" name="file" id="file" onchange="checkMedia()" />
换成:

<input type="file" name="file" id="file" value="D:\ebook\test.txt"?onchange="checkMedia()" />

显示给我们的还是一个没有值的file框

?

比如:

<html>

<input? type="file" value="D:\ebook\test.txt"/>

</html>

?

也是一个没有值的文件选择框。

1 楼 wjc_3306 2010-11-24  
你这样删除会把 onchange事件删除掉  请问有解决办法吗?
2 楼 zhangmingji 2010-11-25  
wjc_3306 写道
你这样删除会把 onchange事件删除掉  请问有解决办法吗?

不太明白你的意思,onchange事件没有被删除掉啊,不知道你说的onchange事件被删除掉是指哪种情况?