HTML5-WebSocket实现多文件同时上传
2013-01-26 16:23
417 查看
HTML5-WebSocket实现多文件同时上传
在传统的HTTP应用上传文件想要同时上传多个文件并查看上传进度是一件很麻烦的事情,当然现在也有一些基于SWF的文件上传组件提供这种的便利性.到了HTML5下对文件的读取和上传的控制方面就非常灵活,HTML5提供一系列的AIP进行文件读取,包括计取文件某一块的内容也非常方便,结合Websocket进行文件的传输就变得更加方便和灵活.下面通过使用HTML5结合websocet简单地实现多文件同时上传应用.主要功能是用户可以直接把文件夹的文件直接拖放到网页中,并进行上传,在上传的过程中显示上传进度信息.
FileInfo类封装
为了方便读取文件信息,在原有File的基础封装了一个简单文件信息读取的对象类.?
文件拖放
在HTML5中接受系统文件拖放进来并不需要做复杂的事情,只需要针对容器元素绑定相关事件即可.?
这时候只需要针对选择的文件构建相关FileInfo对象,并调用上传方法即可.
?
?
C#服务端
借助于Beetle对websocket的支持对应服务端的实现就非常简单了?
总结
只需要以上简单的代码就能实现多文件同时上传功能,在这采用json来处理上传的信息,所以文件流要进行一个base64的编码处理,由于websocket浏览提交的数据一般都有MASK处理再加上base64那损耗相对来说比较重,实际上websocket有提供流的数据包格式(arraybuffer);当然这种处理在操作上就没有json来得方便简单.下载代码:WebSocketUpload.rar (642.65 kb)
演示地址:http://html5.ikende.com/upload.htm 使用chrome或IE10浏览器
可靠、高性能的Socket TCP通讯组件
开源数据库访问组件
c#组件设计交流群:47164588
c# socket :136485198微博http://weibo.com/ikende
相关文章推荐
- HTML5-WebSocket实现多文件同时上传
- HTML5-WebSocket实现多文件同时上传
- 用html5的websocket实现的文件上传,支持断点续传,妙传。
- 基于html5 websocket API简单实现断点上传文件
- 基于html5 websocket API简单实现断点上传文件
- jQuery利用XMLHttpRequest()和FormData()实现同时上传文件和数据
- java jsch实现sftp文件上传,并且控制上传的速度,同时监控上传进度
- 多文件同时上传实现方法
- 基于javascript html5实现多文件上传
- HTML5实现文件上传进度条显示
- jQuery.Form实现Ajax上传文件同时设置headers的方法
- 使用Html5的WebSocket在浏览器上传文件
- SpringMVC与ajaxfileupload.js实现多个文件同时上传
- Struts2实现同时多文件上传
- Ext4+Servlet+HTML5实现实时获取文件上传进度、本地预览、文件拖拽上传的相册实例
- html5实现表单内的上传文件框,建立一个可存取到该file的url。
- 基于html5+java实现大文件上传实例代码
- HTML5 FormData 方法介绍以及实现文件上传
- 文件上传(jspsmart实现)file和text表单同时提交的问题
- HTML5 FormData实现文件上传实例