IE下使用js清空file控件值的幾種方法

在firefox下使用js清空file控件的value非常簡單,即:obj.value=""; 就可以了,但在ie下,由於出於安全等方面考慮,file的value被設爲了只讀,所以js對其不能直接地控制,因此我們只能使用一些變通的方法來解決,網上對此也有好些方法,在此我談談自己認爲最好的幾種。

下面以上傳文件格式限制(只對擴展名判斷)這一實例來說明。

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" οnchange="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" οnclick="addUploadField('myFile' ,'attachments_span');" value="Add" />  
</span>  
</body>  
</html>  
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章