随笔-75  评论-74  文章-35  trackbacks-1

用过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">&nbsp;</td>
  </tr>
  <tr>
    <td height="117">&nbsp;<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)  编辑  收藏 所属分类: 学习笔记

评论:
# re: 仿126添加上传文件 2008-05-12 20:22 | 关十三
不兼容其它浏览器  回复  更多评论