websocket上传大文件,websocket 文件上传
在传统的HTTP应用中，同时上传多个文件并查看上传进度非常麻烦。当然，有一些基于SWF的文件上传组件提供了这种便利。在HTML5下控制文件的读取和上传是非常灵活的，html 5提供了一系列文件读取的AIP，包括计算某个文件的内容。结合Websocket传输文件变得更加方便灵活。下面我们可以简单的利用HTML5和websocet实现多个文件的同时上传。
实现功能
粗略预览需要完成的功能：
主要功能是用户可以直接将文件夹中的文件拖拽到网页中，进行上传，并在上传过程中显示上传进度信息。
FileInfo类封装
为了方便读取文件信息，在原文件的基础上封装了一个简单的读取文件信息的对象类。
函数FileInfo(file，pagesize) { this .Size=file.size这个。文件=文件；这个FileType=file.type这个文件名=文件名这个PageSize=页面大小这个页面索引=0；这个。页数=0;这个UploadError=null这个UploadProcess=null这个DataBuffer=null这个上传字节=0；这个ID=数学。地板(数学。random()*0x 10000).toString(16)；这个LoadCallBack=nullif (Math.floor(这个。大小%这个.PageSize) 0) { this .Pages=Math.floor((这个。尺寸/这个PageSize))1；} else { this .Pages=Math.floor(this .尺寸/这个PageSize)；} } fileinfo。原型。reset=function(){ this .页面索引=0；这个上传字节=0；} fileinfo。原型。to base 64 string=function(){ var binary= var bytes=new uint 8 array(this .数据缓冲区)变量len=字节。字节长度；for(var I=0；我lenI){ binary=string。from charcode(bytes[I])}返回窗口。btoa(二进制)；} fileinfo。原型。onload data=function(evt){ var obj=evt。目标[ tag ]；如果(evt。目标。就绪状态==文件阅读器.DONE) { obj .数据缓冲器=evt。目标。结果；如果(obj .LoadCallBack！=null) obj .加载回调(obj)；} else { if (obj .上传错误！=null) obj .上传错误(fi，evt。目标。错误)；} } fileinfo。原型。负载=功能(已完成){这个.LoadCallBack=已完成；如果(这个。FileReader==null this。FileReader==undefined)这个。FileReader=新文件读取器()；var reader=this . filereaderreader[ tag ]=this；reader.onloadend=this .OnLoadDatavar count=this .大小-这个PageIndex *这个。页面大小；如果（算上这个PageSize)计数=这个.页面大小；这个上传字节=计数；var blob=this .File.slice(这个PageIndex *这个。页面大小，这个PageIndex *这个。页面大小计数);读者。readasarraybuffer(blob)；};文件信息。原型。onuploaddata=function(file){ var channel=file ._ channelvar url=file ._ url渠道。发送({ url: url，参数：{ FileID: file .ID，页面索引：文件.页面索引，页面：文件页，base 64数据：文件。to base 64 string()} }，function(result){ if(result。状态==null 结果。状态==未定义){文件.页面索引如果（文件。上传过程！=空)文件UploadProcess(文件);如果（文件。页面索引文件100页){ file .加载（文件OnUploadData)；} } else { if (file .上传错误！=空)文件UploadError(文件，数据。状态)；} });} fileinfo。原型。上传=功能(频道，网址){ var fi=this渠道。发送({ url: url，参数：{文件名：fi .文件名，大小：菲.大小，文件身份证号：菲.ID} }，函数(结果){ if(结果。状态==null 结果。状态==未定义){ fi ._channel=频道；菲. url=result.data菲。负载(菲.OnUploadData)；} else { if(文件。上传错误！=空)文件UploadError(fi，结果。状态)；} });} 类的处理很简单，通过文件初始化并指定分块大小来实始化一些文件信息，如页数量页大小等。当然最重要还封装文件对应的上传方法，用于把文件块信息打包成base64信息通过求转发到的方式发送到服务器。
文件拖放
在HTML5中接受系统文件拖放进来并不需要做复杂的事情，只需要针对容器元素绑定相关事件即可。
函数onDragEnter(e){ e . stop propagation()；e .防止违约()；}函数onDragOver(e){ e .停止传播()；e .防止违约()；$(收存箱).加类(“四舍五入”)；}函数onDragLeave(e){ e .停止传播()；e .防止违约()；$(收存箱).移除类(“rounded”)；}函数onDrop(e){ e .停止传播()；e .防止违约()；$(收存箱).移除类(“rounded”)；var读取文件大小=0；var文件=e .数据传输。文件；如果(文件。长度0){ onFileOpen(文件)；} } 只需要在放置过程中获取相关拖放文件即可，这些可能通过一些HTML5的教程可以得到帮助。
这时候只需要针对选择的文件构建相关文件信息对象，并调用上传方法即可。
函数onFileOpen(files){ if(files。长度0){ for(var I=0；我文件。长度；I){ var info=new FileInfo(files[I]，32768)；上传。推送(信息)；信息upload process=onUploadProcessaddUploadItem(info)；} } } 通过上传过程事件对上传文件进度信息进行一个设置更新
上传过程中得函数(文件){ $( # p _ 文件.身份证).progressbar({ value: (file .页面索引/文件100页)* 100，文本：文件。文件名"["文件UploadBytes /文件。大小] });}C#服务端
借助于甲虫对求转发到的支持对应服务端的实现就非常简单了
///摘要///版权所有Henry fan 2012///创建时间：2012/12/14 21:13:34////摘要公共类处理程序{ public void upload package(string FileID，int PageIndex，int Pages，string Base64Data) { Console .WriteLine(FileID:{2}，PageIndex:{ 0 } Pages:{ 1 } DataLength:{ 3 } ，PageIndex，Pages，FileID，Base64Data .长度);} public string UploadFile(string FileID，string FileName，long Size) { Console .WriteLine(FileID:{2}，文件名：{0}大小：{1} ,文件名，大小，FileID)；返回"处理程序上传包；} } 服务端方法有两个一个是上传文件请求，和一个上传文件块接收方法。
总结
只需要以上简单的代码就能实现多文件同时上传功能，在这采用数据来处理上传的信息，所以文件流要进行一个base64的编码处理，由于求转发到浏览提交的数据一般都有面具处理再加上base64那损耗相对来说比较重，实际上求转发到有提供流的数据包格式(数组缓冲区)；当然这种处理在操作上就没有数据来得方便简单。
下载代码：WebSocketUpload.rar
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。