HTML5WebSocket实现多文件同时上传的实例

实现功能

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

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

FileInfo类封装

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

类的处理很简单,通过file初始化并指定分块大小来实始化一些文件信息,如页数量页大小等.当然最重要还封装文件对应的Upload方法,用于把文件块信息打包成base64信息通过Websocket的方式发送到服务器.

文件拖放

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

只需要在onDrop过程中获取相关拖放文件即可,这些可能通过一些HTML5的教程可以得到帮助。

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

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

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