H5+WebSocket은 동시에 여러 파일을 업로드합니다.-H5 튜토리얼-php.cn

이번에는 H5+WebSocket 다중 파일 동시 업로드에 대한 주의 사항을 가져왔습니다. 실제 사례를 살펴보겠습니다.

기존 HTTP 애플리케이션에서 파일을 업로드하고 동시에 여러 파일을 업로드하고 업로드 진행 상황을 확인하려는 것은 매우 번거로운 일입니다. 물론 이러한 편의를 제공하는 일부 SWF 기반 파일 업로드 구성 요소도 있습니다. HTML5 파일 읽기 및 업로드 제어는 매우 유연합니다. HTML5는 파일의 특정 부분의 내용을 계산하는 것을 포함하여 파일 전송을 더욱 편리하게 해줍니다. 유연합니다. 다음은 HTML5와 websoce를 동시에 사용하여 여러 파일 업로드 애플리케이션을 동시에 구현하는 것입니다. 주요 기능은 사용자가 폴더에 있는 파일을 직접 웹페이지에 드래그 앤 드롭하여 업로드할 수 있으며, 업로드 진행 중에 업로드 진행 정보가 표시됩니다.

FileInfo 클래스 캡슐화

In 파일 읽기

정보를 용이하게 하기 위해 원본 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);
        }
    });
 
}

로그인 후 복사

클래스의 처리는 매우 간단합니다. 그리고 페이지 수, 페이지 크기 등과 같은 블록 크기를 지정합니다. 물론 가장 중요한 것은 파일의 해당 정보를 캡슐화하는 것입니다. Upload 메서드는 파일 블록 정보를 base64 정보로 패키징하는 데 사용됩니다.

파일 드래그 앤 드롭

HTML5에서는 시스템 파일 드래그 앤 드롭을 허용하기 위해 복잡한 작업을 수행할 필요가 없으며 관련 이벤트를 컨테이너 요소에 바인딩하면 됩니다.

function onDragEnter(e) {
            e.stopPropagation();
            e.preventDefault();
        }
 
        function onDragOver(e) {
            e.stopPropagation();
            e.preventDefault();
            $(dropbox).addClass(&#39;rounded&#39;);
        }
 
        function onDragLeave(e) {
            e.stopPropagation();
            e.preventDefault();
            $(dropbox).removeClass(&#39;rounded&#39;);
        }
 
        function onDrop(e) {
            e.stopPropagation();
            e.preventDefault();
            $(dropbox).removeClass(&#39;rounded&#39;);
            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) {
            $(&#39;#p_&#39; + file.ID).progressbar({ value: (file.PageIndex / file.Pages) * 100,
                text: file.FileName + &#39;[&#39; + file.UploadBytes + &#39;/&#39; + file.Size + &#39;]&#39;
            });
        }

로그인 후 복사

C# 서버

를 통해 업로드 파일 진행 정보를 구성하고 업데이트합니다.

Beetle의 웹소켓 지원 서버 측 구현은 매우 간단합니다

/// <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을 사용하므로 데이터가 제출되므로 파일 스트림을 인코딩해야 합니다. websocket 브라우징에는 일반적으로 MASK 처리가 있으며 base64의 손실이 상대적으로 더 심각합니다. 실제로 websocket은 스트림 패킷 형식(arraybuffer)을 제공하지만 이러한 종류의 처리는 json만큼 편리하고 간단하지 않습니다.

다운로드 코드: WebSocketUpload.rar

이 기사의 사례를 읽었을 것입니다. 방법을 익힌 후 더 흥미로운 콘텐츠를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!