模仿QQ邮箱添加附件的javascript
贴出全部HTML＋JS代码，在这里做个备份，当前版本暂定为1.0吧，以后还会改进。比如选择附件后，显示附件的大小。如果有bug或可以改进的地方，希望不吝赐教！
<!--
Author:aquaqin
Techblog:http://blog.csdn.net/aquadp/
CreateDate:2008-4-822:00:00
LastModifyDate:2008-4-922:46:35
-->
<HTML>
<HEAD>
<script>
/**//*
需要注意的几个地方：
.由于inputtype=file控件不能对type属性赋值(inIE),所以采用插入HTML代码的方式(insertAdjacentHTML)；
.inputtype=file控件的value是只读的，不能被赋值；
.因为用一个inputtype=file控件有缺陷，就是当用户删除了最后一次添加的文件再添加同样的文件则无法触发onchange事件；
并且要上传文件，只用一个上传控件是不够的；
.客户端无法获取文件大小，除非用FSO或ActiveX等。除了img控件，其fileSize可以在图片文件加载完成后获取其文件大小；
.还有另外一种变通的方法就是用flash与js交互达到获取客户端文件大小的效果(现在flash在安全方面也做了限制)；
*/
vari=0;//用来动态生成span,upfile的id
functionaddAttachmentToList()
...{
if(findAttachment(event.srcElement.value))return;//如果此文档已在附件列表中则不再添加
//动态创建附件信息栏并添加到附件列表中
varspan=document.createElement('span');
span.id='_attachment'+i;
span.innerHTML=extractFileName(event.srcElement.value)+' <ahref="javascript:delAttachment('+(i++)+')"><fontcolor="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+'个附件';
}
functionselectAttachment()
...{
//先清除无效动态生成的多余upfile
cleanInvalidUpfile();
//动态创建上传控件并与span对应
varupfile='<inputtype="file"style="display:none"onchange="addAttachmentToList();"id="_upfile'+i+'">';
document.body.insertAdjacentHTML('beforeEnd',upfile);
G('_upfile'+i).click();
}
functionextractFileName(fn)
...{
returnfn.substr(fn.lastIndexOf('\')+1);
}
functionfindAttachment(fn)
...{
varo=G('attachmentList').getElementsByTagName('span');
for(vari=0;i<o.length;i++)
if(o[i].title==fn)returntrue;
returnfalse;
}
functiondelAttachment(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+'个附件';
}
functioncleanInvalidUpfile()
...{
varo=document.body.getElementsByTagName('input');
for(vari=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]);
}
}
functionclearAttachment()
...{
varo=G('attachmentList').childNodes;
for(vari=o.length-1;i>=0;i--)
G('attachmentList').removeChild(o[i]);
o=document.body.getElementsByTagName('input');
for(vari=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个附件';
}
functiongetAttachmentInfo()
...{
//已知的js获取本地文件大小的三种方式
//1.通过FSO2.通过ActiveX3.通过Flash(设置可能更麻烦)与js交互
//注：QQ邮箱中获取本地文件大小就是采用第二种方式
}
functionG(id)
...{
returndocument.getElementById(id);
}
</script>
</HEAD>
<BODY>
<fieldsetstyle="border:1pxsolid#84A24A;text-align:left;COLOR:#84A24A;FONT-SIZE:
12px;font-family:Verdana;padding:5px;">
<legend>模仿QQ邮箱添加附件</legend>
<inputtype="button"value="添加附件"id="btnAdd"onclick="selectAttachment();"> <inputtype="button"value="清空附件"id="btnClear"style="display:none"onclick="clearAttachment();">
<divid="attachmentList"style="margin:3px0px0px0px;padding:4px3px4px3px;background-color:#DEEBC6;display:none;border:1pxsolid#84A24A;">
</div>
<divid="total"style="margin:3px0px0px0px;">当前选择上传0个附件</div>
</fieldset>
</BODY>
</HTML>
<!--
Author:aquaqin
Techblog:http://blog.csdn.net/aquadp/
CreateDate:2008-4-822:00:00
LastModifyDate:2008-4-922:46:35
-->
<HTML>
<HEAD>
<script>
/**//*
需要注意的几个地方：
.由于inputtype=file控件不能对type属性赋值(inIE),所以采用插入HTML代码的方式(insertAdjacentHTML)；
.inputtype=file控件的value是只读的，不能被赋值；
.因为用一个inputtype=file控件有缺陷，就是当用户删除了最后一次添加的文件再添加同样的文件则无法触发onchange事件；
并且要上传文件，只用一个上传控件是不够的；
.客户端无法获取文件大小，除非用FSO或ActiveX等。除了img控件，其fileSize可以在图片文件加载完成后获取其文件大小；
.还有另外一种变通的方法就是用flash与js交互达到获取客户端文件大小的效果(现在flash在安全方面也做了限制)；
*/
vari=0;//用来动态生成span,upfile的id
functionaddAttachmentToList()
...{
if(findAttachment(event.srcElement.value))return;//如果此文档已在附件列表中则不再添加
//动态创建附件信息栏并添加到附件列表中
varspan=document.createElement('span');
span.id='_attachment'+i;
span.innerHTML=extractFileName(event.srcElement.value)+' <ahref="javascript:delAttachment('+(i++)+')"><fontcolor="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+'个附件';
}
functionselectAttachment()
...{
//先清除无效动态生成的多余upfile
cleanInvalidUpfile();
//动态创建上传控件并与span对应
varupfile='<inputtype="file"style="display:none"onchange="addAttachmentToList();"id="_upfile'+i+'">';
document.body.insertAdjacentHTML('beforeEnd',upfile);
G('_upfile'+i).click();
}
functionextractFileName(fn)
...{
returnfn.substr(fn.lastIndexOf('\')+1);
}
functionfindAttachment(fn)
...{
varo=G('attachmentList').getElementsByTagName('span');
for(vari=0;i<o.length;i++)
if(o[i].title==fn)returntrue;
returnfalse;
}
functiondelAttachment(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+'个附件';
}
functioncleanInvalidUpfile()
...{
varo=document.body.getElementsByTagName('input');
for(vari=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]);
}
}
functionclearAttachment()
...{
varo=G('attachmentList').childNodes;
for(vari=o.length-1;i>=0;i--)
G('attachmentList').removeChild(o[i]);
o=document.body.getElementsByTagName('input');
for(vari=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个附件';
}
functiongetAttachmentInfo()
...{
//已知的js获取本地文件大小的三种方式
//1.通过FSO2.通过ActiveX3.通过Flash(设置可能更麻烦)与js交互
//注：QQ邮箱中获取本地文件大小就是采用第二种方式
}
functionG(id)
...{
returndocument.getElementById(id);
}
</script>
</HEAD>
<BODY>
<fieldsetstyle="border:1pxsolid#84A24A;text-align:left;COLOR:#84A24A;FONT-SIZE:
12px;font-family:Verdana;padding:5px;">
<legend>模仿QQ邮箱添加附件</legend>
<inputtype="button"value="添加附件"id="btnAdd"onclick="selectAttachment();"> <inputtype="button"value="清空附件"id="btnClear"style="display:none"onclick="clearAttachment();">
<divid="attachmentList"style="margin:3px0px0px0px;padding:4px3px4px3px;background-color:#DEEBC6;display:none;border:1pxsolid#84A24A;">
</div>
<divid="total"style="margin:3px0px0px0px;">当前选择上传0个附件</div>
</fieldset>
</BODY>
</HTML>