仿126 GMail QQ添加附件的界面

最新推荐文章于 2021-05-27 04:00:46 发布

最新推荐文章于 2021-05-27 04:00:46 发布 · 228 阅读

文章标签：

#Gmail #QQ #JavaScript #IE #Ajax #ViewUI

JavaScript 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一段用于模仿126邮箱等网站的附件上传功能的JavaScript代码。通过该代码，用户可以实现文件的选择、添加、删除及清空等操作，并在网页上实时显示已选文件列表。

所使用到的JavaScript代码如下:


var i = 0;  
function addAttachmentToList(){
 if (findAttachment(event.srcElement.value)) return;        
    var span = document.createElement('span');
    span.id = '_attachment' + i;
    span.innerHTML = extractFileName(event.srcElement.value) + ' <a href="javascript:delAttachment(' + (i++) + ')"><font color="blue">删除</font></a><br/>';
    span.title = event.srcElement.value;
    G('attachmentList').appendChild(span);

    if (G('attachmentList').style.display == 'none')
    {
        G('btnAdd').value = '继续添加';
        G('attachmentList').style.display = '';
        G('btnClear').style.display = '';
    }

    G('total').innerText = '当前选择上传'+ G('attachmentList').childNodes.length + '个附件';
}

function selectAttachment()
{
    cleanInvalidUpfile();

    var upfile = '<input type="file" style="display:none" onchange="addAttachmentToList();" id="_upfile'+i+'">';
    document.body.insertAdjacentHTML('beforeEnd', upfile);
    G('_upfile'+i).click();
}

function extractFileName(fn)
{
    return fn.substr(fn.lastIndexOf("\\") + 1);
}

function findAttachment(fn)
{
    var o = G('attachmentList').getElementsByTagName('span');
    for(var i=0;i<o.length;i++)
        if (o[i].title == fn) return true;
    return false;
}

function delAttachment(id)
{
    G('attachmentList').removeChild(G('_attachment'+id));
    document.body.removeChild(G('_upfile'+id));

    // 当附件列表为空则不显示并且变化添加附件按钮文本
    if (G('attachmentList').childNodes.length == 0)
    {
        G('btnAdd').value = '添加附件';
        G('attachmentList').style.display = 'none';
        G('btnClear').style.display = 'none';
    }

    G('total').innerText = '当前选择上传'+ G('attachmentList').childNodes.length + '个附件';    
}

function cleanInvalidUpfile()
{
    var o = document.body.getElementsByTagName('input');
    for(var i=o.length-1;i>=0;i--)
      if (o[i].type == 'file' && o[i].id.indexOf('_upfile') == 0)
     {
          if (!G('_attachment'+o[i].id.substr(7)))
              document.body.removeChild(o[i]);
      }
}

function clearAttachment()
{
    var o = G('attachmentList').childNodes;
    for(var i=o.length-1;i>=0;i--)
        G('attachmentList').removeChild(o[i]);

    o = document.body.getElementsByTagName('input');
    for(var i=o.length-1;i>=0;i--)
      if (o[i].type == 'file' && o[i].id.indexOf('_upfile') == 0)
      {
          document.body.removeChild(o[i]);
      }    

    G('btnAdd').value = '添加附件';
    G('attachmentList').style.display = 'none';
    G('btnClear').style.display = 'none';

    G('total').innerText = '当前选择上传0个附件';    

}

function G(id)
{
    return document.getElementById(id);
}

将以上代码在页面中引用：

<HTML>
<HEAD></HEAD>
<BODY>
<fieldset style="border : 1px solid #84A24A;text-align:left;COLOR:#84A24A;FONT-SIZE: 
12px;font-family: Verdana;padding:5px;">
<legend>模仿126 GMail QQ邮箱添加附件</legend>
<input type="button" value="添加附件" id="btnAdd" onclick="selectAttachment();"> <input type="button" value="清空附件" id="btnClear" style="display:none" onclick="clearAttachment();">
<div id="attachmentList" style="margin:3px 0px 0px 0px;padding:4px 3px 4px 3px;background-color:#DEEBC6;display:none;border:1px solid #84A24A;">
</div>
<div id="total" style="margin:3px 0px 0px 0px;">当前选择上传0个附件</div>
</fieldset>
</BODY>
</HTML>