在傳統(tǒng)的HTTP應(yīng)用上傳文件想要同時(shí)上傳多個(gè)文件并查看上傳進(jìn)度是一件很麻煩的事情,當(dāng)然現(xiàn)在也有一些基于SWF的文件上傳組件提供這種的便利性.到了HTML5下對文件的讀取和上傳的控制方面就非常靈活,HTML5提供一系列的AIP進(jìn)行文件讀取,包括計(jì)取文件某一塊的內(nèi)容也非常方便,結(jié)合Websocket進(jìn)行文件的傳輸就變得更加方便和靈活.下面通過使用HTML5結(jié)合websocet簡單地實(shí)現(xiàn)多文件同時(shí)上傳應(yīng)用。
實(shí)現(xiàn)功能
大概預(yù)覽一下需要做的功能:
主要功能是用戶可以直接把文件夾的文件直接拖放到網(wǎng)頁中,并進(jìn)行上傳,在上傳的過程中顯示上傳進(jìn)度信息.
FileInfo類封裝
為了方便讀取文件信息,在原有File的基礎(chǔ)封裝了一個(gè)簡單文件信息讀取的對象類.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105 |
function FileInfo(file, pagesize) { this.Size = file.size; this.File = file; this.FileType = file.type; this.FileName = file.name; this.PageSize = pagesize; this.PageIndex = 0; this.Pages = 0; this.UploadError = null; this.UploadProcess = null; this.DataBuffer = null; this.UploadBytes = 0; this.ID = Math.floor(Math.random() * 0x10000).toString(16); this.LoadCallBack = null; if
(Math.floor(this.Size % this.PageSize) > 0) { this.Pages = Math.floor((this.Size / this.PageSize)) + 1; } else
{ this.Pages = Math.floor(this.Size / this.PageSize); } } FileInfo.prototype.Reset = function
() { this.PageIndex = 0; this.UploadBytes = 0; } FileInfo.prototype.toBase64String = function
() { var
binary = '' var
bytes = new Uint8Array(this.DataBuffer) var
len = bytes.byteLength; for
(var i = 0; i < len; i++) { binary += String.fromCharCode(bytes[i]) } return
window.btoa(binary); } FileInfo.prototype.OnLoadData = function
(evt) { var
obj = evt.target["tag"]; if
(evt.target.readyState == FileReader.DONE) { obj.DataBuffer = evt.target.result; if
(obj.LoadCallBack != null) obj.LoadCallBack(obj); } else
{ if
(obj.UploadError != null) obj.UploadError(fi, evt.target.error); } } FileInfo.prototype.Load = function
(completed) { this.LoadCallBack = completed; if
(this.filereader == null
|| this.filereader == undefined) this.filereader = new
FileReader(); var
reader = this.filereader; reader["tag"] = this; reader.onloadend = this.OnLoadData; var
count = this.Size - this.PageIndex * this.PageSize; if
(count > this.PageSize) count = this.PageSize; this.UploadBytes += count; var
blob = this.File.slice(this.PageIndex * this.PageSize, this.PageIndex * this.PageSize + count); reader.readAsArrayBuffer(blob); }; FileInfo.prototype.OnUploadData = function
(file) { var
channel = file._channel; var
url = file._url; channel.Send({ url: url, parameters: { FileID: file.ID, PageIndex: file.PageIndex, Pages: file.Pages, Base64Data: file.toBase64String()} }, function
(result) { if
(result.status == null
|| result.status == undefined) { file.PageIndex++; if
(file.UploadProcess != null) file.UploadProcess(file); if
(file.PageIndex < file.Pages) { file.Load(file.OnUploadData); } } else
{ if
(file.UploadError != null) file.UploadError(file, data.status); } }); } FileInfo.prototype.Upload = function
(channel, url) { var
fi = this; channel.Send({ url: url, parameters: { FileName: fi.FileName, Size: fi.Size, FileID: fi.ID} }, function
(result) { if
(result.status == null
|| result.status == undefined) { fi._channel = channel; fi._url = result.data; fi.Load(fi.OnUploadData); } else
{ if
(file.UploadError != null) file.UploadError(fi, result.status); } }); } |
類的處理很簡單,通過file初始化并指定分塊大小來實(shí)始化一些文件信息,如頁數(shù)量頁大小等.當(dāng)然最重要還封裝文件對應(yīng)的Upload方法,用于把文件塊信息打包成base64信息通過Websocket的方式發(fā)送到服務(wù)器。
文件拖放
在HTML5中接受系統(tǒng)文件拖放進(jìn)來并不需要做復(fù)雜的事情,只需要針對容器元素綁定相關(guān)事件即可.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28 |
function onDragEnter(e) { e.stopPropagation(); e.preventDefault(); } function
onDragOver(e) { e.stopPropagation(); e.preventDefault(); $(dropbox).addClass('rounded'); } function
onDragLeave(e) { e.stopPropagation(); e.preventDefault(); $(dropbox).removeClass('rounded'); } function
onDrop(e) { e.stopPropagation(); e.preventDefault(); $(dropbox).removeClass('rounded'); var
readFileSize = 0; var
files = e.dataTransfer.files; if
(files.length > 0) { onFileOpen(files); } } |
只需要在onDrop過程中獲取相關(guān)拖放文件即可,這些可能通過一些HTML5的教程可以得到幫助,詳細(xì)看http://www.html5rocks.com/zh/tutorials/file/dndfiles/
這時(shí)候只需要針對選擇的文件構(gòu)建相關(guān)FileInfo對象,并調(diào)用上傳方法即可.
|
1
2
3
4
5
6
7
8
9
10 |
function onFileOpen(files) { if
(files.length > 0) { for
(var i = 0; i < files.length; i++) { var
info = new FileInfo(files[i], 32768); uploads.push(info); info.UploadProcess = onUploadProcess; addUploadItem(info); } } } |
通過UploadProcess事件對上傳文件進(jìn)度信息進(jìn)行一個(gè)設(shè)置更新
|
1
2
3
4
5 |
function onUploadProcess(file) { $('#p_'
+ file.ID).progressbar({ value: (file.PageIndex / file.Pages) * 100, text: file.FileName + '['
+ file.UploadBytes + '/'
+ file.Size + ']' }); } |
C#服務(wù)端
借助于Beetle對websocket的支持對應(yīng)服務(wù)端的實(shí)現(xiàn)就非常簡單了
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19 |
/// <summary> /// Copyright ? henryfan 2012 ///Email: henryfan@msn.com ///HomePage: http://www.ikende.com ///CreateTime: 2012/12/14 21:13:34 /// </summary> public
class Handler { public
void UploadPackage(string
FileID, int
PageIndex, int
Pages, string
Base64Data) { Console.WriteLine("FileID:{2},PageIndex:{0} Pages:{1} DataLength:{3}", PageIndex, Pages, FileID,Base64Data.Length); } public
string UploadFile(string
FileID, string
FileName, long
Size) { Console.WriteLine("FileID:{2},FileName:{0} Size:{1}", FileName, Size, FileID); return
"Handler.UploadPackage"; } } |
服務(wù)端方法有兩個(gè)一個(gè)是上傳文件請求,和一個(gè)上傳文件塊接收方法。
總結(jié)
只需要以上簡單的代碼就能實(shí)現(xiàn)多文件同時(shí)上傳功能,在這采用json來處理上傳的信息,所以文件流要進(jìn)行一個(gè)base64的編碼處理,由于websocket瀏覽提交的數(shù)據(jù)一般都有MASK處理再加上base64那損耗相對來說比較重,實(shí)際上websocket有提供流的數(shù)據(jù)包格式(arraybuffer);當(dāng)然這種處理在操作上就沒有json來得方便簡單。
下載代碼:WebSocketUpload.rar (642.65 kb)
演示地址:http://html5.ikende.com/upload.htm 使用chrome或IE10瀏覽器