首页前端开发HTMLH5+WebSocket多文件同时上传

H5+WebSocket多文件同时上传

时间2024-01-23 07:22:05发布访客分类HTML浏览240
导读：收集整理的这篇文章主要介绍了H5+WebSocket多文件同时上传，觉得挺不错的，现在分享给大家，也给大家做个参考。这次给大家带来H5+WebSocket多文件同时上传，H5+WebSocket多文件同时上传的注意事项有哪些，下面就是实战案...
收集整理的这篇文章主要介绍了H5+WebSocket多文件同时上传，觉得挺不错的，现在分享给大家，也给大家做个参考。这次给大家带来H5+WebSocket多文件同时上传，H5+WebSocket多文件同时上传的注意事项有哪些，下面就是实战案例，一起来看一下。

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

实现功能

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

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

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

相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！

推荐阅读：

spring mvc+localResizeimg实现H5端图片压缩上传

H5表单验证有哪些方法

H5实现旋转立体魔方

以上就是H5+WebSocket多文件同时上传的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！

html5

若转载请注明出处： H5+WebSocket多文件同时上传
本文地址： https://pptw.com/jishu/583900.html
H5的存储方式详解 H5+C3如何展示3D效果的商品信息

游客 回复需填写必要信息
↑