<![CDATA[向东博客 专注WEB应用 构架之美 --- 构架之美，在于尽态极妍 | 应用之美，在于药到病除]]> http://jackxiang.com/index.php zh-cn http://jackxiang.com/post// <![CDATA[IE下使用js清空file控件值的几种方法]]> jack <xdy108@126.com> Fri, 30 Apr 2010 06:43:21 +0000 http://jackxiang.com/post//
下面以上传文件格式限制（只对扩展名判断）这一实例来说明。

1、file控件由HTML生成


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script>
function CheckUpLoadFile(obj) {
DenyExt = "exe|cmd|jsp|php|asp|aspx|html|htm";
var FileExt = "";
FileExt = obj.value.substr(obj.value.lastIndexOf(".") + 1).toLowerCase();
if (DenyExt.indexOf(FileExt) != -1) {
alert("You can't upload the file of the types:" + DenyExt);
if (!window.addEventListener) {    
//IE 关键代码在这里！！！
//方法一(此方法最佳！)：
obj.outerHTML+='';
//方法二：
//       var newObj= obj.cloneNode(true);
//       newObj.value=''; // 设置新控件value为空
//       obj.parentNode.replaceChild(newObj, obj);

} else {
//非IE
obj.value = "";
return false;
}

}
}
</script>
<title>无标题文档</title>
</head>
<body>
<span id="attachments_span">
<input type="file" name="myfile" onchange="CheckUpLoadFile(this);">
</span>
</body>
</html>


2、file控件由JS动态生成


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<script>  
function addUploadField(name, parentId) {  
var f = document.createElement("input");  
f.type = "file";  
f.name = name;  
if (window.addEventListener) { // Mozilla, Netscape, Firefox    
f.addEventListener("change", function() {  
CheckUpLoadFile(f, parentId);  
}, false);  
} else { // IE    
f.attachEvent('onchange', function() {  
CheckUpLoadFile(f, parentId);  
});  
}  
f.size = 30;  
p = document.getElementById(parentId);  
p.appendChild(document.createElement("br"));  
p.appendChild(f);  
}  

function CheckUpLoadFile(obj) {  
DenyExt = "exe|cmd|jsp|php|asp|aspx|html|htm";  
if (obj.value == "") {
return false;
}
var FileExt = "";  
FileExt = obj.value.substr(obj.value.lastIndexOf(".") + 1).toLowerCase();  
if (DenyExt.indexOf(FileExt) != -1) {  
alert("You can't upload the file of the types:" + DenyExt);  
if (!window.addEventListener) {      
//IE 关键代码在这里！！！
obj.select();  
document.execCommand('Delete');  
obj.blur();  
//obj.outerHTML+=''; 此方法虽然很安全，但可惜在此不能使用
return false;  
} else {  
//非IE  
obj.value = "";  
return false;  
}  

}  
}  
</script>  
<title>无标题文档</title>  
</head>  
<body>  
<span id="attachments_span">  
<input type="button" name="add" onclick="addUploadField('myFile' ,'attachments_span');" value="Add" />  
</span>  
</body>  
</html>


file.select();
document.execCommand('Delete');
其他的方法会或多或少的引发一些其他的副作用!

比如:重写innerHTML方法,会引起,再此file域上的事件失效!

调用activex控件会遇到安全性问题!

我写的这个方法最简单,最好用!

转自 http://hi.baidu.com/gudaoxuri/blog/item/0b0095cad9b32a8fc91768c7.html ]]> http://jackxiang.com/post//#blogcomment <![CDATA[[评论] IE下使用js清空file控件值的几种方法]]> <user@domain.com> Thu, 01 Jan 1970 00:00:00 +0000 http://jackxiang.com/post//#blogcomment