JS仿网易多附件上传功能

html

<div nowrap id="filespan">             
    <input type="button" onclick="addFile()" value="添加附件" id="btnAdd" />     
    <div id="divMsg">尚未添加文件</div>
</div>

js

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;
}
//-->