|
這個(gè)仿163網(wǎng)盤無刷新文件上傳系統(tǒng),并沒有用使用.NET的控件,完全的手工制作。前臺(tái)基本上是靜態(tài)的,跟后臺(tái)沒有關(guān)系,所以后臺(tái)用什么語言做都可以(后面有各個(gè)版本的實(shí)例下載)。
本來覺得這個(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)的部分分離出來,首先把簡(jiǎn)單的分離,接著是文件列表,然后是file控件,最后是一些提示性程序。經(jīng)過幾次嘗試才把整個(gè)結(jié)構(gòu)封裝好,現(xiàn)在程序結(jié)構(gòu)應(yīng)該算比較清晰,有什么不明白的地方歡迎留言。
效果預(yù)覽
上傳文件 | |||
添加文件: | ![]() | ||
| |||
溫馨提示:最多可同時(shí)上傳 個(gè)文件,只允許上傳 文件。 | |||
程序說明
【無刷新上傳】
要實(shí)現(xiàn)文件上傳,form必須設(shè)置幾個(gè)屬性:
1.action:設(shè)為要處理數(shù)據(jù)的頁面地址;
2.method:設(shè)為"post";
3.enctype/encoding:必須設(shè)為"multipart/form-data",這里要注意的是在ie中用js修改form的enctype屬性是沒有效果的,只能修改encoding;
后面兩個(gè)屬性程序初始化時(shí)都有設(shè)置:
this.Form.method = "post";this.Form.encoding = "multipart/form-data";
【多文件上傳】
對(duì)于多文件上傳,這里的目的是如何做到163網(wǎng)盤那樣,只用一個(gè)file控件就實(shí)現(xiàn)多文件上傳。
這里參考了163網(wǎng)盤的思路,下面說說如何實(shí)現(xiàn):
首先必須有一個(gè)文件空間(我自己定的名字),例如程序中的"idFile"對(duì)象,這個(gè)空間不需要內(nèi)容甚至一個(gè)div就可以,主要是用來存放file控件,程序中Folder屬性就是這個(gè)文件空間對(duì)象。
ps:這里的要求是把file控件都控制在文件空間里,即使不是單file控件的情況。
再說說Files屬性,這個(gè)屬性放的是file控件集合,方便獲取file控件,在下面“文件列表”就會(huì)用到。
處理這些file控件的程序主要在Ini函數(shù)中:
首先是處理文件空間中的file控件:


this.Files = [];
//整理文件空間,把有值的file放入文件集合
Each(this.Folder.getElementsByTagName("input"), Bind(this, function(o){
if(o.type == "file"){ o.value && this.Files.push(o); this.onIniFile(o); }
}))
【文件列表】
在上面的Ini函數(shù)中,最后執(zhí)行了一個(gè)附加函數(shù)onIni,這個(gè)函數(shù)是用戶自己定義的,我就在這個(gè)函數(shù)中添加文件列表。
在之前先說說添加文件列表的函數(shù)AddList,這個(gè)函數(shù)是用來把file控件的值列在一個(gè)table里面。
函數(shù)的參數(shù)是一個(gè)二維數(shù)組,其中第一維是行(tr),第二維是列(td)。
首先獲取列表對(duì)象FileList,再定義一個(gè)文檔碎片oFragment來操作dom:
【后臺(tái)】
前臺(tái)基本完成了,就到后臺(tái)啦。后臺(tái)的功能很簡(jiǎn)單,就是處理傳遞過來的文件數(shù)據(jù)。
這里像js + .NET 圖片切割系統(tǒng)那樣使用ashx文件處理IHttpHandler發(fā)送過來的數(shù)據(jù)。
程序很簡(jiǎn)單,就直接貼代碼了:


int iTotal = context.Request.Files.Count;
if (iTotal == 0)
{
_msg = "沒有數(shù)據(jù)";
}
else
{
int iCount = 0;
for (int i = 0; i < iTotal; i++)
{
HttpPostedFile file = context.Request.Files[i];
if (file.ContentLength > 0 || !string.IsNullOrEmpty(file.FileName))
{
//保存文件
file.SaveAs(System.Web.HttpContext.Current.Server.MapPath("./file/" + Path.GetFileName(file.FileName)));
//這里可以根據(jù)實(shí)際設(shè)置其他限制
if (++iCount > UploadFileLimit)
{
_msg = "超過上傳限制:" + UploadFileLimit;
break;
}
}
}
}
NET技術(shù):仿163網(wǎng)盤無刷新文件上傳系統(tǒng),轉(zhuǎn)載需保留來源!
鄭重聲明:本文版權(quán)歸原作者所有,轉(zhuǎn)載文章僅為傳播更多信息之目的,如作者信息標(biāo)記有誤,請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除,多謝。