JS仿网易多附件上传功能

<!--
/*----------------------------以下为调用页面必需HTML----------------------------
<style type="text/css">
.NoborderR{background: none;border:none;}
</style>
<script language="javascript" type="text/javascript" src="upload.js"></script>           
<div nowrap id="filespan">             
    <input type="button" onclick="addFile()" value="添加附件" id="btnAdd" />     
    <div id="divMsg">尚未添加文件</div>
</div>
------------------------------以上为调用页面必需HTML--------------------------
*/

//----- Multi Upload Functions -------------------------------------------------
var isIE = (navigator.userAgent.indexOf("MSIE"!= -1);
var fileIndex = 0;
var dic = new ActiveXObject("Scripting.Dictionary");

function addFile() {
    
var obj;
    
if (isIE) {
        obj 
= document.createElement("<input type=file id='hdnFile' onchange='getValue(this.value);' style='display:none' />");        
    }
 else {
         obj 
= document.createElement("input");
         obj.type 
= "file";
         obj.id
="hdnFile";
         obj.setAttribute(
"style""display:none;"0);
         obj.setAttribute(
"onchange""javascript:getValue(this.value);"0);
    }

    document.getElementById(
"filespan").appendChild(obj);
    document.getElementById(
'hdnFile').click();  
    
//addInputFile(spanId, fileId);
    document.getElementById('divMsg').style.display = (dic.Count > 0)?'none':'';        
}


function addInputFile(spanId, fileId, str) {
    
var span = document.getElementById(spanId);
    
if (span != null{
        
//检测存在性        
        //if (dic.Exists(fileId))
        if(valueExists(str))
        
{
            alert(
"不能重复添加相同文件");
            
return false;
        }

        
var divObj = document.createElement("div"), fileObj, delObj;
        divObj.id 
= fileId;
        divObj.style.height
='22';
        
var imgObj, fileObj, delObj;
        
if (isIE) {        
            imgObj 
= document.createElement("<img src='unknown.gif' />");
            fileObj 
= document.createElement("<input type=text readonly>");
            delObj 
= document.createElement("<img src='delfile.jpg' onclick=delInputFile('" + spanId + "','" + fileId + "')>");            
        }
 else {
            imgObj 
= document.createElement("img");
            imgObj.setAttribute(
"src""unknown.gif"0);
            fileObj 
= document.createElement("input");
            fileObj.type 
= "text";
            fileObj.setAttribute(
"readonly""readonly"0);
            
//fileObj.setAttribute("onchange", "javascript:alert('');", 0);
            delObj = document.createElement("img");
            imgObj.setAttribute(
"src""delfile.jpg"0);
            
//delObj.type = "button";
            delObj.setAttribute("onclick""delInputFile('" + spanId + "','" + fileId + "')"0);
        }

        fileObj.name 
= fileId;
        fileObj.size 
= "50";    
        fileObj.value 
= str;
        fileObj.className 
= "NoborderR";
        
//delObj.value = "删除";        
        divObj.appendChild(imgObj);
        divObj.appendChild(document.createTextNode(
" "));
        divObj.appendChild(fileObj);        
        divObj.appendChild(document.createTextNode(
" "));        
        divObj.appendChild(delObj);
        span.appendChild(divObj);
        
//数据字典记录
        dic.Add(fileId, str);        
    }

}


function delInputFile(spanId, fileId) {
    
var span = document.getElementById(spanId);
    
var divObj = document.getElementById(fileId);
    
if (span != null && divObj != null{
        span.removeChild(divObj);
        
//从数据字典移除
        dic.Remove(fileId);
        document.getElementById(
'divMsg').style.display = (dic.Count > 0)?'none':'';
    }

}


function getValue(str)
{
    
var spanId = "filespan";
    
var fileId = "uploadfile" + (fileIndex++);
    addInputFile(spanId, fileId, str);
    document.getElementById(spanId).removeChild(document.getElementById(
'hdnFile'));
}


function valueExists(str)
{  
   a 
= (new VBArray(dic.Items())).toArray();   //获取条目。  
   for (i in a)                  //遍历该 dictionary。
   {
      
if(a[i]==str)
        
return true;
   }

   
return false;
}

//-->
原文地址:https://www.cnblogs.com/ding0910/p/1103486.html