仿QQ附件上传

royzhou1985

浏览: 249767 次
性别:
来自: 广州

最近访客更多访客>>

a684716

zhengzizhi

ganxueyun

odinyu

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Javascript

QQ Flash IE Blog .net

<!--
Author: aqua qin
Tech blog:http://blog.csdn.net/aquadp/
Create Date: 2008-4-8 22:00:00
Last Modify Date: 2008-4-9 22:46:35
-->
<HTML>
<HEAD>
<script>
/**//*
需要注意的几个地方：
.由于input type=file控件不能对type属性赋值(in IE),所以采用插入HTML代码的方式(insertAdjacentHTML)；
.input type=file控件的value是只读的，不能被赋值；
.因为用一个input type=file控件有缺陷，就是当用户删除了最后一次添加的文件再添加同样的文件则无法触发onchange事件；
并且要上传文件，只用一个上传控件是不够的；
.客户端无法获取文件大小，除非用FSO或ActiveX等。除了img控件，其fileSize可以在图片文件加载完成后获取其文件大小；
.还有另外一种变通的方法就是用flash与js交互达到获取客户端文件大小的效果(现在flash在安全方面也做了限制)；
*/
var i = 0;    // 用来动态生成span,upfile的id
function addAttachmentToList()
{
    if (findAttachment(event.srcElement.value)) return;    //如果此文档已在附件列表中则不再添加
    
    // 动态创建附件信息栏并添加到附件列表中
    var span = document.createElement('span');
    span.id = '_attachment' + i;
    span.innerHTML = extractFileName(event.srcElement.value) + '&nbsp;<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()
{
    // 先清除无效动态生成的多余upfile
    cleanInvalidUpfile();
    
    // 动态创建上传控件并与span对应
    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 getAttachmentInfo()
{
    // 已知的js获取本地文件大小的三种方式
    // 1.通过FSO 2.通过ActiveX 3.通过Flash(设置可能更麻烦)与js交互
    // 注：QQ邮箱中获取本地文件大小就是采用第二种方式
}

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

</script>
</HEAD>
<BODY>
<fieldset style="border : 1px solid #84A24A;text-align:left;COLOR:#84A24A;FONT-SIZE: 
12px;font-family: Verdana;padding:5px;">
<legend>模仿QQ邮箱添加附件</legend>
<input style="background:transparent;border:1px solid #84A24A;color:#84A24A" type="button" value="添加附件" id="btnAdd" onclick="selectAttachment();">&nbsp;<input type="button" value="清空附件" style="background:transparent;border:1px solid #84A24A;color:#84A24A" 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>

分享到：

网页head区常用代码 | MySQL取字符长度(中英文不同解决)

2009-01-17 15:06
浏览 2763
评论(1)
查看更多

1 楼 songsu 2011-04-16

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

仿QQ附件上传

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

仿QQ附件上传

评论

发表评论

相关推荐

window.onresize 触发多次解决方法

百度源代码里的精妙javascript图片大小处理函数

javascript 日历控件

兼容IE和Firefox Event对象

设置window.open打开窗口的标题

iframe 自适应高度

彻底领悟javascript中的exec与match方法

正则表达式方法的几个方法介绍match exec search replace split

javascript 与或非运算符详解

javascript try finally 妙用,防止内存泄漏

JAVASCRIPT 中 VOID(0) 的含义

onbeforeunload与onunload的使用

Ajax 封装

JavaScript执行window.onload和body onload多个处理过程的方法

javascript 变量作用域

兼容IE、FF的insertAdjacentHTML方法

javascript格式化日期

javascript:数据类型Null与Undefined

客户端获取上传文件的大小

javascript打开链接的几种方式

最近访客更多访客>>