日期:2014-05-16 浏览次数:20339 次
???? 最近在给别人做一个网站,后台要求只能上传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>
?
也是一个没有值的文件选择框。