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

本来觉得这个系统会很复杂，但把每个部分都分析清楚后，其实需要的技术并不高。不过当我把各个功能函数都整理好准备进行封装时，却发现要把程序封装不是那么容易，因为程序跟html的耦合度太高。然后我逐步把程序中操作html相关的部分分离出来，首先把简单的分离，接着是文件列表，然后是file控件，最后是一些提示性程序。经过几次尝试才把整个结构封装好。
</p> <p><title>仿163网盘<a href="https://kunjuke.com/tag/13597/" title="无刷新" target="_blank">无刷新</a><a href="https://kunjuke.com/tag/1364/" title="文件上传" target="_blank">文件上传</a>系统</title> </p> <p>.fu_list {<br /> width:600px;<br /> background:#ebebeb;<br /> font-size:12px;<br /> }<br /> .fu_list td {<br /> padding:5px;<br /> line-height:20px;<br /> background-color:#fff;<br /> }<br /> .fu_list table {<br /> width:100%;<br /> border:1px solid #ebebeb;<br /> }<br /> .fu_list thead td {<br /> background-color:#f4f4f4;<br /> }<br /> .fu_list b {<br /> font-size:14px;<br /> }<br /> /*file容器样式*/<br /> a.files {<br /> width:90px;<br /> height:30px;<br /> overflow:hidden;<br /> display:block;<br /> border:1px solid #BEBEBE;<br /> background:url(/attachment.php?aid=8332&noupdate=yes) left top no-repeat;<br /> text-decoration:none;<br /> }<br /> a.files:hover {<br /> background-color:#FFFFEE;<br /> background-position:0 -30px;<br /> }<br /> /*file设为透明，并覆盖整个触发面*/<br /> a.files input {<br /> margin-left:-350px;<br /> font-size:30px;<br /> cursor:pointer;<br /> filter:alpha(opacity=0);<br /> opacity:0;<br /> }<br /> /*取消点击时的虚线框*/<br /> a.files, a.files input {<br /> outline:none;/*ff*/<br /> hide-focus:expression(this.hideFocus=true);/*ie*/<br /> } </p> <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> </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"> </p> </td> </tr> </tbody> </table> <p>
[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
在线演示 http://img.jb51.net/online/FileUpload/FileUpload.htm
打包文件下载 http://xiazai.jb51.net/200810/yuanma/FileUpload.rar