搜尋
首頁web前端H5教程HTML5-WebSocket实现多文件同时上传

       在传统的HTTP应用上传文件想要同时上传多个文件并查看上传进度是一件很麻烦的事情,当然现在也有一些基于SWF的文件上传组件提供这种的便利性.到了HTML5下对文件的读取和上传的控制方面就非常灵活,HTML5提供一系列的AIP进行文件读取,包括计取文件某一块的内容也非常方便,结合Websocket进行文件的传输就变得更加方便和灵活.下面通过使用HTML5结合websocet简单地实现多文件同时上传应用。

实现功能


大概预览一下需要做的功能:


HTML5-WebSocket实现多文件同时上传


主要功能是用户可以直接把文件夹的文件直接拖放到网页中,并进行上传,在上传的过程中显示上传进度信息.


FileInfo类封装


为了方便读取文件信息,在原有File的基础封装了一个简单文件信息读取的对象类.


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
        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.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初始化并指定分块大小来实始化一些文件信息,如页数量页大小等.当然最重要还封装文件对应的Upload方法,用于把文件块信息打包成base64信息通过Websocket的方式发送到服务器。


文件拖放


在HTML5中接受系统文件拖放进来并不需要做复杂的事情,只需要针对容器元素绑定相关事件即可.


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过程中获取相关拖放文件即可,这些可能通过一些HTML5的教程可以得到帮助,详细看http://www.html5rocks.com/zh/tutorials/file/dndfiles/


这时候只需要针对选择的文件构建相关FileInfo对象,并调用上传方法即可.


1
2
3
4
5
6
7
8
9
10
function onFileOpen(files) {
            if (files.length > 0) {
                for (var i = 0; i
                    var info = new FileInfo(files[i], 32768);
                    uploads.push(info);
                    info.UploadProcess = onUploadProcess;
                    addUploadItem(info);
                }
            }
        }


通过UploadProcess事件对上传文件进度信息进行一个设置更新


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#服务端


借助于Beetle对websocket的支持对应服务端的实现就非常简单了


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/// <summary> </summary>
    /// Copyright © henryfan 2012        
    ///Email:   henryfan@msn.com    
    ///HomePage:    <a href="http://www.ikende.com%20%20%20%20%20%20%20/">http://www.ikende.com       </a>
    ///CreateTime:  2012/12/14 21:13:34
    ///
    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";
        }
    }


服务端方法有两个一个是上传文件请求,和一个上传文件块接收方法。


总结


只需要以上简单的代码就能实现多文件同时上传功能,在这采用json来处理上传的信息,所以文件流要进行一个base64的编码处理,由于websocket浏览提交的数据一般都有MASK处理再加上base64那损耗相对来说比较重,实际上websocket有提供流的数据包格式(arraybuffer);当然这种处理在操作上就没有json来得方便简单。


下载代码:WebSocketUpload.rar (642.65 kb) 


演示地址:http://html5.ikende.com/upload.htm 使用chrome或IE10浏览器

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
如何將音頻添加到我的HTML5網站上?如何將音頻添加到我的HTML5網站上?Mar 10, 2025 pm 03:01 PM

本文解釋瞭如何使用&lt; audio&gt;元素,包括用於格式選擇的最佳實踐(MP3,OGG Vorbis),文件優化和JavaScript控件用於播放。 它強調使用多個音頻f

如何使用HTML5頁面可見性API檢測頁面何時可見?如何使用HTML5頁面可見性API檢測頁面何時可見?Mar 13, 2025 pm 07:51 PM

本文討論了使用HTML5頁面可見性API來檢測頁面可見性,提高用戶體驗並優化資源使用情況。關鍵方麵包括暫停媒體,減少CPU負載以及基於可見性變化管理分析。

如何使用視口元標記來控制移動設備上的頁面縮放?如何使用視口元標記來控制移動設備上的頁面縮放?Mar 13, 2025 pm 08:00 PM

本文討論了使用視口元標記來控制移動設備上的頁面縮放,重點是寬度和初始尺度之類的設置,以獲得最佳響應和性能。

如何將HTML5表單用於用戶輸入?如何將HTML5表單用於用戶輸入?Mar 10, 2025 pm 02:59 PM

本文解釋瞭如何創建和驗證HTML5表格。 它詳細介紹了&gt;元素,輸入類型(文本,電子郵件,編號等)和屬性(必需,模式,最小,最大)。 HTML5的優勢比舊方法形成

如何使用地理位置API處理用戶位置隱私和權限?如何使用地理位置API處理用戶位置隱私和權限?Mar 18, 2025 pm 02:16 PM

本文討論了使用GeOlocation API管理用戶位置隱私和權限,並強調要求權限,確保數據安全性並遵守隱私法律的最佳實踐。

如何使用HTML5和JavaScript創建互動遊戲?如何使用HTML5和JavaScript創建互動遊戲?Mar 10, 2025 pm 06:34 PM

本文使用JavaScript詳細介紹了創建Interactive HTML5遊戲。 它涵蓋了遊戲設計,HTML結構,CSS樣式,JavaScript邏輯(包括事件處理和動畫)以及音頻集成。 必需的JavaScript庫(Phaser,Pi

如何將HTML5拖放API用於交互式用戶界面?如何將HTML5拖放API用於交互式用戶界面?Mar 18, 2025 pm 02:17 PM

本文介紹瞭如何使用HTML5拖放API來創建交互式用戶界面,詳細介紹了使元素可拖動的步驟,處理關鍵事件並通過自定義反饋來增強用戶體驗。它還討論了一個常見的陷阱

如何使用HTML5 Websockets API進行客戶端和服務器之間的雙向通信?如何使用HTML5 Websockets API進行客戶端和服務器之間的雙向通信?Mar 12, 2025 pm 03:20 PM

本文解釋了HTML5 Websockets API,用於實時雙向客戶服務器通信。 它詳細詳細介紹了客戶端(JavaScript)和服務器端(Python/Flask)的實現,以應對可伸縮性,狀態管理,一個挑戰

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前By尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SecLists

SecLists

SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合,這些清單在安全評估過程中經常使用,而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表,幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上,他就可以存取所需的每種類型的清單。

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強大的PHP整合開發環境

EditPlus 中文破解版

EditPlus 中文破解版

體積小,語法高亮,不支援程式碼提示功能