HTML5+WebSocket实现多文件同时上传的实例


Posted in HTML / CSS onDecember 29, 2016

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

实现功能

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

HTML5+WebSocket实现多文件同时上传的实例

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

FileInfo类封装

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

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

文件拖放

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

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的教程可以得到帮助。

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

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事件对上传文件进度信息进行一个设置更新

function onUploadProcess(file) {

            $('#p_' + file.ID).progressbar({ value: (file.PageIndex / file.Pages) * 100,

                text: file.FileName + '[' + file.UploadBytes + '/' + file.Size + ']'

            });

        }

C#服务端

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

/// <summary>

    /// Copyright © henryfan 2012        

    ///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";

        }

    }

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

总结

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

下载代码:WebSocketUpload.rar  

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
css3背景_动力节点Java学院整理
Jul 11 HTML / CSS
css3 线性渐变和径向渐变示例附图
Apr 08 HTML / CSS
用CSS3绘制三角形的简单方法
Jul 17 HTML / CSS
CSS3 3D旋转rotate效果实例介绍
May 03 HTML / CSS
CSS3中引入多种自定义字体font-face
Jun 12 HTML / CSS
css3 transform过渡抖动问题解决
Oct 23 HTML / CSS
使用Html5、CSS实现文字阴影效果
Jan 17 HTML / CSS
HTML5实现的震撼3D焦点图动画的示例代码
Sep 26 HTML / CSS
html5 video标签屏蔽右键视频另存为的js代码
Nov 12 HTML / CSS
HTML5 Canvas玩转酷炫大波浪进度图效果实例(附demo)
Dec 14 HTML / CSS
position:sticky 粘性定位的几种巧妙应用详解
Apr 24 HTML / CSS
css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效
Apr 29 HTML / CSS
详解前端HTML5几种存储方式的总结
Dec 27 #HTML / CSS
HTML5利用约束验证API来检查表单的输入数据的代码实例
Dec 20 #HTML / CSS
基于zepto的插件之移动端无缝向上滚动并上下触摸滑动实例代码
Dec 20 #HTML / CSS
html5 postMessage解决跨域、跨窗口消息传递方案
Dec 20 #HTML / CSS
详解HTML5中表单验证的8种方法介绍
Dec 19 #HTML / CSS
【HTML5】3D模型--百行代码实现旋转立体魔方实例
Dec 16 #HTML / CSS
使用spring mvc+localResizeIMG实现HTML5端图片压缩上传的功能
Dec 16 #HTML / CSS
You might like
Win2003下APACHE+PHP5+MYSQL4+PHPMYADMIN 的简易安装配置
2006/11/18 PHP
ThinkPHP学习笔记(一)ThinkPHP部署
2014/06/22 PHP
PHP函数实现从一个文本字符串中提取关键字的方法
2015/07/01 PHP
PHP针对redis常用操作实例详解
2019/08/17 PHP
laravel 实现向公共模板中传值 (view composer)
2019/10/22 PHP
强悍无比的WEB开发好助手FireBug(Firefox Plugin)
2007/01/16 Javascript
jQuery 使用个人心得
2009/02/26 Javascript
下载网站打开页面后间隔多少时间才显示下载链接地址的代码
2010/04/25 Javascript
Js判断CSS文件加载完毕的具体实现
2014/01/17 Javascript
浅谈JavaScript前端开发的MVC结构与MVVM结构
2016/06/03 Javascript
vue.js实现表格合并示例代码
2016/11/30 Javascript
JavaScript实现事件的中断传播和行为阻止方法示例
2017/01/20 Javascript
JavaScript之Canvas_动力节点Java学院整理
2017/07/04 Javascript
Vue实现搜索 和新闻列表功能简单范例
2018/03/16 Javascript
详解Vue 项目中的几个实用组件(ts)
2019/10/29 Javascript
Python遍历指定文件及文件夹的方法
2015/05/09 Python
Python中函数的参数定义和可变参数用法实例分析
2015/06/04 Python
在Python中使用zlib模块进行数据压缩的教程
2015/06/26 Python
Python cookbook(字符串与文本)在字符串的开头或结尾处进行文本匹配操作
2018/04/20 Python
基于Tensorflow:CPU性能分析
2020/02/10 Python
Python自动化测试笔试面试题精选
2020/03/12 Python
史上最详细的Python打包成exe文件教程
2021/01/17 Python
阿玛尼美国官方网站:Armani.com
2016/11/25 全球购物
就业推荐表自我鉴定
2013/10/29 职场文书
班主任工作年限证明
2014/01/12 职场文书
五年级语文教学反思
2014/01/30 职场文书
大学考试作弊检讨书
2014/01/30 职场文书
体育专业自荐书
2014/05/29 职场文书
小学生志愿者活动方案
2014/08/23 职场文书
领导干部对照检查材料
2014/08/24 职场文书
2014年全国爱牙日宣传活动方案
2014/09/21 职场文书
代收款委托书范本
2014/10/01 职场文书
逃课检讨书
2015/01/26 职场文书
上班迟到检讨书范文
2015/05/06 职场文书
关于保护环境的建议书
2019/06/24 职场文书
Qt自定义Plot实现曲线绘制的详细过程
2021/11/02 Python