模仿QQ邮箱添加附件

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="div.aspx.cs" Inherits="div" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<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) + ' <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();" >当前选择上传0个附件</div>
</fieldset>
</BODY>
</HTML>