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

2024-05-06 14:16:57

字體：大中小

供稿：網(wǎng)友

本來覺得這個(gè)系統(tǒng)會(huì)很復(fù)雜，但把每個(gè)部分都分析清楚后，其實(shí)需要的技術(shù)并不高。不過當(dāng)我把各個(gè)功能函數(shù)都整理好準(zhǔn)備進(jìn)行封裝時(shí)，卻發(fā)現(xiàn)要把程序封裝不是那么容易，因?yàn)槌绦蚋鷋tml的耦合度太高。然后我逐步把程序中操作html相關(guān)的部分分離出來，首先把簡單的分離，接著是文件列表，然后是file控件，最后是一些提示性程序。經(jīng)過幾次嘗試才把整個(gè)結(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設(shè)為透明，并覆蓋整個(gè)觸發(fā)面*/ a.files input { margin-left:-350px; font-size:30px; cursor:pointer; filter:alpha(opacity=0); opacity:0; } /*取消點(diǎn)擊時(shí)的虛線框*/ a.files, a.files input { outline:none;/*ff*/ hide-focus:expression(this.hideFocus=true);/*ie*/ } </style> </body> </html>
[Ctrl+A 全選注:如需引入外部Js需刷新才能執(zhí)行]
在線演示 http://img.Vevb.com/online/FileUpload/FileUpload.htm
打包文件下載 http://xiazai.Vevb.com/200810/yuanma/FileUpload.rar

上一篇：prototype Element學(xué)習(xí)筆記(Element篇三)

下一篇：Javascript循環(huán)綁定事件的示例代碼