H5+WebSocket uploads multiple files at the same time

This time I will bring you H5+WebSocket to upload multiple files at the same time. What are the precautions for H5+WebSocket to upload multiple files at the same time? The following is a practical case, let’s take a look.

It is very troublesome to upload files in traditional HTTP applications and want to upload multiple files at the same time and check the upload progress. Of course, there are also some SWF-based

file upload components that provide this This kind of convenience. When it comes to controlling the reading and uploading of files under HTML5, it is very flexible. HTML5 provides a series of AIPs for file reading, including calculating the content of a certain piece of the file. It is also very convenient to combine the Websocket for file reading. The transmission becomes more convenient and flexible. By using HTML5 combined with websocet, we can simply implement multiple file upload applications at the same time.

Achieve functions

Give a rough preview of the functions that need to be done:

The main function is that users can directly drag and drop files in the folder to the web page and upload them. During the upload process Display upload progress information.

FileInfoClass encapsulation

For the convenience of

reading file information , based on the original File, a simple object class for reading file information is encapsulated. The processing of the

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  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  class is very simple. Some file information, such as the number of pages, is initialized by initializing the file and specifying the block size. Page size, etc. Of course, the most important thing is to encapsulate the Upload method corresponding to the file, which is used to package the file block information into base64 information and send it to the server through Websocket.<p style="text-align: left;"></p><p style="text-align: left;"><strong>File Drag and Drop<span style="color:#ff0000"></span></strong></p>You don’t need to do complicated things to accept drag-and-drop of system files in HTML5. You only need to bind relevant events to the container element.<p style="text-align: left;"></p><pre class="brush:php;toolbar:false">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);
            }
 
        }

Only need to do it in onDrop Just get the relevant drag-and-drop files during the process. These may be helped by some HTML5 tutorials.

At this time, you only need to build the relevant FileInfo object for the selected file and call the upload method.

function onFileOpen(files) {
            if (files.length > 0) {
                for (var i = 0; i Use the UploadProcess event to set and update the upload file progress information<p style="text-align: left;"></p><pre class="brush:php;toolbar:false">function onUploadProcess(file) {
            $('#p_' + file.ID).progressbar({ value: (file.PageIndex / file.Pages) * 100,
                text: file.FileName + '[' + file.UploadBytes + '/' + file.Size + ']'
            });
        }

C#Server

With the help of Beetle’s support for websocket, the corresponding server implementation is very simple

/// <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";
        }
    }

There are two server methods Each one is an upload file request, and an upload file block receiving method.

Summary

Only the above simple code can achieve many Simultaneous file upload function uses json to process the uploaded information, so the file stream needs to be encoded with base64. Since the data submitted by websocket browsing generally has MASK processing plus base64, the loss is relatively heavy. In fact, Websocket provides a streaming data packet format (arraybuffer); of course, this kind of processing is not as convenient and simple as json in operation.

Download code: WebSocketUpload.rar

I believe I have read the case in this article You have mastered the method. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

spring mvc+localResizeIMG implements H5 image compression and upload

What are the methods for H5 form verification

H5 realizes rotating three-dimensional Rubik's Cube

The above is the detailed content of H5+WebSocket uploads multiple files at the same time. For more information, please follow other related articles on the PHP Chinese website!