javascript仿163网盘无刷新文件上传系统

3672Js.Com2019-03-08 17:35 来源:未知阅读:14422 关注度4

javascript仿163网盘无刷新文件上传系统

本来觉得这个系统会很复杂，但把每个部分都分析清楚后，其实需要的技术并不高。不过当我把各个功能函数都整理好准备进行封装时，却发现要把程序封装不是那么容易，因为程序跟html的耦合度太高。然后我逐步把程序中操作html相关的部分分离出来，首先把简单的分离，接着是文件列表，然后是file控件，最后是一些提示性程序。经过几次尝试才把整个结构封装好。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>仿163网盘无刷新文件上传系统</title> 
</head> 
<body> 
<style> 
.fu_list { 
width:600px; 
background:#ebebeb; 
font-size:12px; 
} 
.fu_list td { 
padding:5px; 
line-height:20px; 
background-color:#fff; 
} 
.fu_list table { 
width:100%; 
border:1px solid #ebebeb; 
} 
.fu_list thead td { 
background-color:#f4f4f4; 
} 
.fu_list b { 
font-size:14px; 
} 
/*file容器样式*/ 
a.files { 
width:90px; 
height:30px; 
overflow:hidden; 
display:block; 
border:1px solid #BEBEBE; 
background:url(/attachment.php?aid=8332&noupdate=yes) left top no-repeat; 
text-decoration:none; 
} 
a.files:hover { 
background-color:#FFFFEE; 
background-position:0 -30px; 
} 
/*file设为透明，并覆盖整个触发面*/ 
a.files input { 
margin-left:-350px; 
font-size:30px; 
cursor:pointer; 
filter:alpha(opacity=0); 
opacity:0; 
} 
/*取消点击时的虚线框*/ 
a.files, a.files input { 
outline:none;/*ff*/ 
hide-focus:expression(this.hideFocus=true);/*ie*/ 
} 
</style> 
 
 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

在线演示 http://img.jb51.net/online/FileUpload/FileUpload.htm
打包文件下载 http://xiazai.jb51.net/200810/yuanma/FileUpload.rar

本站文章为3672js教程网友分享投稿，版权归原作者，欢迎任何形式的转载，但请务必注明出处。同时文章内容如有侵犯了您的权益，请联系我们处理。