最近在给别人做一个网站，后台要求只能上传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 οnsubmit="return check()">
<input type="file" name="file" id="file" οnchange="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" οnchange="checkMedia()" />
换成：
<input type="file" name="file" id="file" value="D:\ebook\test.txt" οnchange="checkMedia()" />
显示给我们的还是一个没有值的file框
比如：
<html>
<input type="file" value="D:\ebook\test.txt"/>
</html>
也是一个没有值的文件选择框。
347
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
