用过126.com邮件的人都知道，他的功能确实很强大，其中很多细节都是值得我们去学习。
126.com添加附件一直是人们仿效的对象，我记得在以前的时候，点击一次添加附件就出现一个浏览框，现在他也越来月人性话，直接点击就添加附件，这样让用户少了一步操作，也降低了使用的难度。
下面是我仿照网上一些大侠的做法添加自己的理解做的
上传页面：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>仿上126.com上传文件对话框</title>
<script language="javascript">
var i=0;
//点击选择上传文件
function upLoad(){
i++;
var fileBlock = document.getElementById("upFile");
var oDiv = document.createElement("div");
oDiv.id="fileDiv"+i;
oDiv.innerHTML = "<a href=# class=\"addfile\"><input type=\"file\" class=\"addfile\" name=\"file"+(i)+"\" id=\"file"+(i)+"\" onchange='check();'/></a>";
fileBlock.appendChild(oDiv);
}
//当检查点击的文件域
function check(){
if(document.getElementById("file"+i).value != ""){
var fileList=document.getElementById("fileList");
var lDiv=document.createElement("div");
lDiv.id="list"+i;
lDiv.innerHTML = ""+document.getElementById("file"+i).value+" <a href='javascript:delFile("+i+");'><b>×</b></a>;";
fileList.appendChild(lDiv);
document.getElementById("fileDiv"+i).style.display="none";
upLoad();
}
}
//删除选择文件
function delFile(i){
var fileBlock=document.getElementById("upFile");
var oDiv=document.getElementById("fileDiv"+i)
fileBlock.removeChild(oDiv);
//var list=document.getElementById("listFile");
var lDiv=document.getElementById("list"+i)
lDiv.removeNode(true);
}
</script>
<style type="text/css">
<!--
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333333;
}
a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #CC0000;
text-decoration: none;
}
a:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #CC0000;
text-decoration: none;
}
a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FF0000;
text-decoration: none;
}
a.addfile {
background-image:url(http://p.mail.163.com/js31style/lib/0703131650/163blue/f1.gif);
background-repeat:no-repeat;
background-position:-823px -17px;
display:block;
height:18px;
margin-top:-1px;
text-decoration:none;
width:65px;
}
input.addfile {
/*left:-18px;*/
}
input.addfile {
cursor:pointer !important;
height:20px;
left:-18px;
filter:alpha(opacity=10);
margin-left:-5px;
width:1px;
}
-->
</style>
</head>
<body>
<table width="650" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="117"> </td>
</tr>
<tr>
<td height="117"> <form method="POST" name="form" enctype="multipart/form-data" action="saveup.asp">
<div id="upFile"><script>upLoad();</script></div>
<div id="fileList"></div>
<input name="name" type="text" id="name">
<input type="submit" name="Submit" value="提交">
</form>
</td>
</tr>
</table>
<p></p>
<p></p><p></p><p></p>
</body>
</html>
我通过SA上传组件，做一下上传操作，如下：
<%@ Language=VBScript %>
<%
Function GetFileExt(FullPath)
If FullPath <> "" Then
GetFileExt = LCase(Mid(FullPath,InStrRev(FullPath, ".")+1))
Else
GetFileExt = ""
End If
End function
Set oFileUp = Server.CreateObject("SoftArtisans.FileUp")
oFileUp.Path = Server.MapPath("upfile")
For Each strFormElement In oFileUp.Form
If IsObject(oFileUp.Form(strFormElement)) Then
If Not oFileUp.Form(strFormElement).IsEmpty Then
response.Write oFileUp.Form(strFormElement).ContentType
oFileUp.Form(strFormElement).Save
Response.Write( strFormElement & "|Saved as: " & oFileUp.Form(strFormElement).ServerName & "<br>")
response.Write GetFileExt(oFileUp.Form(strFormElement).ServerName)
Else
// Response.Write(strFormElement)
End If
Else
response.Write(oFileUp.form("name"))
End If
Next
Set oFileUp = Nothing
%>
</BODY>
</HTML>
作者：李武剑 静幽谷 xp sp2 IE 6.0 下调试通过
posted on 2007-07-19 14:22
影子 阅读(444)
评论(1) 编辑 收藏 所属分类:
学习笔记