zoukankan      html  css  js  c++  java
  • 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;
    }

    //-->
  • 相关阅读:
    PHP中可执行代码小结
    HTTP请求头列举
    GET 和 POST详解
    利用kali自带的木马工具来远程控制服务器
    利用PHP木马,远程链接服务器
    利用sqlmap暴力破解数据库密码
    MIT线性代数课程 总结与理解-第一部分
    [转]MFC debug 调试信息的输出
    关于利用均匀分布随机变量产生任意分布变量的实现
    关于string转整数
  • 原文地址:https://www.cnblogs.com/ding0910/p/1103486.html
Copyright © 2011-2022 走看看