javascript仿163網(wǎng)盤無刷新文件上傳系統(tǒng)

更新時間：2008年10月20日 20:56:12 作者：

這個仿163網(wǎng)盤無刷新文件上傳系統(tǒng)，并沒有用使用.net的控件，完全的手工制作。

本來覺得這個系統(tǒng)會很復雜，但把每個部分都分析清楚后，其實需要的技術(shù)并不高。不過當我把各個功能函數(shù)都整理好準備進行封裝時，卻發(fā)現(xiàn)要把程序封裝不是那么容易，因為程序跟html的耦合度太高。然后我逐步把程序中操作html相關的部分分離出來，首先把簡單的分離，接著是文件列表，然后是file控件，最后是一些提示性程序。經(jīng)過幾次嘗試才把整個結(jié)構(gòu)封裝好。

<!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網(wǎng)盤無刷新文件上傳系統(tǒng)</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設為透明，并覆蓋整個觸發(fā)面*/ 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><a href="javascript:void(0);" class="files" id="idFile"></a> <img id="idProcess" style="display:none;" src="/upload/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" /> &nbsp;&nbsp;&nbsp; <input type="button" value="全部取消" id="idBtndel" disabled="disabled" /> </td> </tr> </tbody> </table> </form>  </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

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

您可能感興趣的文章: