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

298 阅读 0 评论 197 点赞

我是靠谱客的博主痴情薯片，这篇文章主要介绍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> 
<form id="uploadForm" action="File.ashx"> 
<table border="0" cellspacing="1" class="fu_list"> 
<thead> 
<tr> 
<td colspan="2"><b>上传文件</b></td> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td align="right" width="15%" style="line-height:35px;">添加文件：</td> 
<td> <img id="idProcess" style="display:none;" src="//file2.kaopuke.com:8081/files_image/201804/20081020205841666.gif" /></td> 
</tr> 
<tr> 
<td colspan="2"><table border="0" cellspacing="0"> 
<thead> 
<tr> 
<td>文件路径</td> 
<td width="100"></td> 
</tr> 
</thead> 
<tbody id="idFileList"> 
</tbody> 
</table></td> 
</tr> 
<tr> 
<td colspan="2" style="color:gray">温馨提示：最多可同时上传 <b id="idLimit"></b> 个文件，只允许上传 <b id="idExt"></b> 文件。 </td> 
</tr> 
<tr> 
<td colspan="2" align="center" id="idMsg"><input type="button" value="开始上传" id="idBtnupload" disabled="disabled" /> 
    
<input type="button" value="全部取消" id="idBtndel" disabled="disabled" /> 
</td> 
</tr> 
</tbody> 
</table> 
</form> 
 
</body> 
</html>

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

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