js清空文件选择框的内容

zhangmingji

浏览: 70752 次
性别:
来自: 北京

最近访客更多访客>>

小覃Smile

天道有情战天下

shougole

其实不坏

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

js学习点滴

JavaScript HTML JSP

最近在给别人做一个网站，后台要求只能上传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的值为：

这时

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

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

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

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

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

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

比如：

<html>

</html>

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

分享到：

AWT 、Swing、SWT的区别与比较（网摘）

2010-10-18 17:01
浏览 10430
评论(4)
分类:Web前端
查看更多

4 楼 seawh411 2013-10-10

谢谢了，找了好久...

3 楼邦者无敌 2013-01-17

document.getElementById("file").outerHTML = document.getElementById("file").outerHTML
实际上这里并不能说是只读，如果是只读，那么红色部分为什么能够被赋值呢。如果赋值为""，那么整个控件都变为空，消失掉。
你alert这个量document.getElementById("file").outerHTML的时候可以看到它的全部；但是你把它作为变量给赋值的时候，它就是最基本的结构，不包含value;

2 楼 zhangmingji 2010-11-25

wjc_3306 写道

你这样删除会把 onchange事件删除掉请问有解决办法吗？

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

1 楼 wjc_3306 2010-11-24

你这样删除会把 onchange事件删除掉请问有解决办法吗？

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论