注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

神魔破杜梓的叨叨堂

Programming every day!

 
 
 

日志

 
 
 
 

类似网易邮箱的附件添加功能(未打包成组件)  

2007-11-05 10:44:38|  分类: My Tech |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

[HTML]

<html>
<head>
 <link href="Assessories.css" rel="stylesheet" type="text/css" />
    <script src="Assessories.js" type="text/javascript"></script>
</head>
<body>
 <div id="AssessoriesContainer">
  <input type="button" id="AddFileButton" value="添加附件"/>
  <input type="file"  class="CurrentUploadFile" hidefocus onchange="if(CheckFileType(this))CreateNewAssessory(this);"/>
 </div>
 <div id="AssessoriesCollection"></div>
</body>

 

[JS]

var fomerAssessoriesCollectionClientHeight = 0;

//生成GUID
function NewUID()
{
    var uid = '';
    var ALPHA_CHARS = '0123456789abcdef';
    var i;
    var j;
   
    for (i=0; i<8;i++)
    {
        //先成成前8位
        uid += ALPHA_CHARS.charAt(Math.round(Math.random()*15));
    }
    for (i=0; i<3; i++)
    {//中间的三个4位16进制数
        uid += '-';
        for (j=0; j<4; j++)
        {
            uid += ALPHA_CHARS.charAt(Math.round(Math.random()*15));
        }
    }
    uid += '-';
    var time = Date.prototype.getTime();
    uid += '0000000'+time.toString(16).toUpperCase().substr(-8);//取后边8位
    for (i=0; i<4; i++)
    {
        uid += ALPHA_CHARS.charAt(Math.round(Math.random()*15));//再循环4次随机拿出4位
    }
    return uid;
}

function getElementX(obj)
{
 var curleft = 0;
 if (obj.offsetParent)
 {
  while (obj.offsetParent)
  {
   curleft += obj.offsetLeft
   obj = obj.offsetParent;
  }
 }
 else if (obj.x)
  curleft += obj.x;

 return curleft;
}

function getElementY(obj)
{
 var curtop = 0;
 if (obj.offsetParent)
 {
  while (obj.offsetParent)
  {
   curtop += obj.offsetTop
   obj = obj.offsetParent;
  }
 }
 else if (obj.x)
  curtop += obj.y;
 return curtop;
}

function getFilesCount(filesContainer)
{
    var count = 0;
   
    var inputs = filesContainer.getElementsByTagName("input");
   
    for(var i = 0;i<inputs.length;i++)
    {
        if(inputs[i].type=="file")
        {
            count++;
        }
    }
    return count;
}

//当只剩下一个file input的时候,获取该file input
function getUniqueFile(filesContainer)
{
    if(getFilesCount(filesContainer) == 1)
    {
        var inputs = filesContainer.getElementsByTagName("input");
   
        for(var i = 0;i<inputs.length;i++)
        {
            if(inputs[i].type=="file")
            {
                return inputs[i];
            }
        }
    }
    return null;
}

//删除附件
function DeleteAssessory()
{
    var deleteIcon = event.srcElement;
    var deleteFileName = deleteIcon.parentNode.previousSibling.innerHTML;  
   
    var assessoriesCollection = deleteIcon.parentNode.parentNode.parentNode;
    var assessoriesContainer = deleteIcon.parentNode.parentNode.parentNode.previousSibling;
   
    var files = assessoriesContainer.childNodes;
    
    var deleteFile;
   
    for(var i = 0 ;i<files.length;i++)
    {
        if(files[i].type == "file")
        {
            if(files[i].value.indexOf(deleteFileName)>=0)
            {
                deleteFile = files[i];
                break;
            }
        }
    }
   
    assessoriesContainer.removeChild(deleteFile);
   
    var assessoriesCollectionItem = deleteIcon.parentNode.parentNode;
    assessoriesCollection.removeChild(assessoriesCollectionItem);
   
   
   
    /*//计算iframe高度,内容过短时自动减少iframe高度
    var distance = 0;
   
    if(fomerAssessoriesCollectionClientHeight == 0 )
    {
        fomerAssessoriesCollectionClientHeight = assessoriesCollection.clientHeight;
        distance = fomerAssessoriesCollectionClientHeight;
    }
   
    if(fomerAssessoriesCollectionClientHeight>assessoriesCollection.clientHeight)
    {
        distance = fomerAssessoriesCollectionClientHeight-assessoriesCollection.clientHeight;
               
        fomerAssessoriesCollectionClientHeight = assessoriesCollection.clientHeight;
    }
   
    if(assessoriesCollection.childNodes.length == 0)
    {     
        distance = fomerAssessoriesCollectionClientHeight;
        fomerAssessoriesCollectionClientHeight = 0;
    }*/
    if(assessoriesCollection.childNodes.length == 0)
    {     
        assessoriesCollection.style.display = "none";
    }   
    //SubtractMainframeHeight(distance);
}

function searchElementById(tagId)
{
    var elements = document.all;
      
    for(var i = 0 ;i<elements.length-1;i++)
    {        
        if( elements[i].id.toString().indexOf(tagId.toString()) >=0 )
        {         
            return elements[i];
        }
    }
    return null;
}

//从文件路径中解析文件名
function getFileNameFromPath(path)
{
    var index = path.lastIndexOf("\\")+1;
   
    return path.substr(index);
}

function inserNewAssessoryLabel(assessoriesCollection,path)
{
    var height = 20;
   
    if(isNaN(parseInt(assessoriesCollection.style.height)))
    {
        assessoriesCollection.style.height = height+"px";
    }
   
    assessoriesCollection.style.background="#cccccc";
    assessoriesCollection.style.lineHeight = height+"px";
   
    var assessory = document.createElement("SPAN");
   
    var assessoryName = document.createElement("LABEL");
    assessoryName.innerText = getFileNameFromPath(path);
    assessoryName.style.display = "inline-block";
    assessoryName.style.height = height+"px";
    assessoryName.style.marginRight = "5px";
    assessoryName.style.marginLeft = "5px";
   
    var assessoryDeletor = document.createElement("A");
    assessoryDeletor.href = "javascript:void(0);";
    assessoryDeletor.attachEvent("onclick",DeleteAssessory);
   
    var deleteIcon = document.createElement("IMG");
    deleteIcon.src = "delete.gif";
   
    assessoryDeletor.appendChild(deleteIcon);
   
    assessory.appendChild(assessoryName);
    assessory.appendChild(assessoryDeletor);
   
    assessoriesCollection.appendChild(assessory);
    assessoriesCollection.style.display="block";
   
    /*//计算iframe高度,内容过长时自动增加iframe高度
    var distance = 0;
   
    if(fomerAssessoriesCollectionClientHeight == 0 )
    {
        fomerAssessoriesCollectionClientHeight = assessoriesCollection.clientHeight;
        distance = fomerAssessoriesCollectionClientHeight;
    }
   
    if(fomerAssessoriesCollectionClientHeight<assessoriesCollection.clientHeight)
    {
        distance = assessoriesCollection.clientHeight-fomerAssessoriesCollectionClientHeight;
        fomerAssessoriesCollectionClientHeight = assessoriesCollection.clientHeight;
    }
   
    AddMainframeHeight(distance);*/
}

function getNewFile(className,onChange,left,top)
{
    var file = document.createElement("input");
   
    file.id = file.name = NewUID().replace(/\-/g,"");
    file.type="file";
    file.className = className;
    file.onchange = onChange;
    file.style.left = left;
    file.style.top = top;
    file.hideFocus = true;
   
    return file;
}


function CreateNewAssessory(currentFile)
{     
    var assessoriesContainer = currentFile.parentNode;

    var newFile = getNewFile(currentFile.className,currentFile.onchange,currentFile.style.left,currentFile.style.top);
   
    assessoriesContainer.appendChild(newFile);
   
    currentFile.className = 'FormerUploadFile';
   
    inserNewAssessoryLabel(currentFile.parentNode.nextSibling,currentFile.value);
}

function removeEmptyChildNodes(parentNode)
{
    var childNodes = parentNode.childNodes;
    var nodesToBeRemoved = new Array();
    for(var i =0;i<childNodes.length;i++)
    {
        if(childNodes[i].id == undefined)
        {
            nodesToBeRemoved.push(childNodes[i]);
        }
    }
   
    for(i =0;i<nodesToBeRemoved.length;i++)
    {
        parentNode.removeChild(nodesToBeRemoved[i]);
    }
}

function changeFileUploadPosition(file)
{  
    removeEmptyChildNodes(file.parentNode);
   
    var addButton = file.previousSibling;
   
    file.style.left = getElementX(addButton)-6;
    file.style.top = getElementY(addButton)+1;
}

function FileUploadFix()
{
    var inputs = document.getElementsByTagName("input");
   
    var file = null;
   
    for(var i = 0;i<inputs.length;i++)
    {
        if(inputs[i].type=="file")
        {
            file = inputs[i];
        }
    }
    file.name = file.id = NewUID().replace(/\-/g,"");
       
    changeFileUploadPosition(file);
}

function CheckFileType(file)
{
    var   ext ="*.exe,*.msi"  
    s = file.value  
    s = s.substr(s.lastIndexOf("."))  
    if(ext.indexOf("*"+s)!=-1)  
    {  
        alert("不允许扩展名为“"+s+"”的文件") ;
         
        return   false; 
    }
    return true;
}

window.attachEvent("onload",FileUploadFix);

 

[CSS]

#AssessoriesContainer
{
 width:100%;
}
.CurrentUploadFile
{
 position:absolute;
 width:0px;
 filter:alpha(opacity=0);
 
}
.FormerUploadFile
{
 display:none;
}
.UploadedFileList
{
 border:0;
 margin:10px 0;
 width:100%;
}
.UploadedFileList td
{
 height:25px;
}
.UploadFileInstruction
{
 display:block;
 height:25px;
 margin:3px 0;
 color:#ff9900;
}

 

 

  评论这张
 
阅读(1070)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017