本文主要包含HTML5教程,HTML5中国,HTML5-WebSocket实现多文件同时上传,html5cn,html5资料,htm等相关知识,匿名希望在学习及工作中可以帮助到您
在传统的HTTP应用上传文件想要同时上传多个文件并查看上传进度是一件很麻烦的事情,当然现在也有一些基于SWF的文件上传组件提供这种的便利性.到了HTML5下对文件的读取和上传的控制方面就非常灵活,HTML5提供一系列的AIP进行文件读取,包括计取文件某一块的内容也非常方便,结合Websocket进行文件的传输就变得更加方便和灵活.下面通过使用HTML5结合websocet简单地实现多文件同时上传应用。
实现功能
大概预览一下需要做的功能:
主要功能是用户可以直接把文件夹的文件直接拖放到网页中,并进行上传,在上传的过程中显示上传进度信息.
FileInfo类封装
为了方便读取文件信息,在原有File的基础封装了一个简单文件信息读取的对象类.
(Math.floor(this.Size % this.PageSize) > 0) {
{
() {
() {
binary = ''
bytes = new Uint8Array(this.DataBuffer)
len = bytes.byteLength;
(var i = 0; i < len; i++) {
window.btoa(binary);
(evt) {
obj = evt.target["tag"];
(evt.target.readyState == FileReader.DONE) {
(obj.LoadCallBack != null)
{
(obj.UploadError != null)
(completed) {
(this.filereader == null
|| this.filereader == undefined)
FileReader();
reader = this.filereader;
count = this.Size - this.PageIndex * this.PageSize;
(count > this.PageSize)
blob = this.File.slice(this.PageIndex * this.PageSize, this.PageIndex * this.PageSize + count);
(file) {
channel = file._channel;
url = file._url;
(result) {
(result.status == null
|| result.status == undefined) {
(file.UploadProcess != null)
(file.PageIndex < file.Pages) {
{
(file.UploadError != null)
(channel, url) {
fi = this;
(result) {
(result.status == null
|| result.status == undefined) {
{
(file.UploadError != null)
类的处理很简单,通过file初始化并指定分块大小来实始化一些文件信息,如页数量页大小等.当然最重要还封装文件对应的Upload方法,用于把文件块信息打包成base64信息通过Websocket的方式发送到服务器。 文件拖放在HTML5中接受系统文件拖放进来并不需要做复杂的事情,只需要针对容器元素绑定相关事件即可.
|