html5+websocket은 동시에 멀티 파일 업로드의 예제를 구현합니다.

기존의 HTTP 응용 프로그램에서 동시에 여러 파일을 업로드하고 업로드 및 업로드 진행 상황은 매우 번거로운 일입니다. WebSocket의 파일 전송과 결합 된 문서도 매우 편리합니다.

아마도 필요한 기능을 미리 볼 수 있습니다.

주요 기능은 사용자가 폴더의 파일을 웹 페이지로 직접 드래그하고 삭제하고 업로드 프로세스 중에 업로드 진행 정보가 표시됩니다.

파일 정보 읽기를 용이하게하기 위해 간단한 파일 정보 읽기 개체 클래스가 원본 파일을 기준으로 캡슐화됩니다.

 fileinfo (파일, page) {file.size. Pages = 0; 16; lse {this.pages = math.floor (this.size / this.pagesize);}} fileinfo.prototyp.reset = function (this.pageindex = 0; function () {var biness = 'var bytes = new uint8aray (this.databuffer) var len = bytes.bytelength; i])} return swooin databuffer = evt .target.result (obj.loadcallback! = null) obj.loadcallback (obj);} else {if (obj.uploaderror! = null) obj.uploaderror (fi, evt.target.er ror); }} fileInfo. reader [this.onloaddata; count; var this.file.slice (this.pagesize * this.pagesize + count); channel = Channel; var url = file.send; }}} function (result) {if (result.status == null || status == undefined) {file.pageindex ++; if (file.pageIndex <file.pages) {file.load (file.onuploaddata);}} else {if (file.uploaderRor! = null) uploaderRor (file, data.status);}); = function (channel, url) {var fi = this ;send ({url : url : {filename : fi.filename, size : fi.size : fi.id}}, function (result) { if (if (if (if result.status == null || result.status == undefined) {fi._channel = channer; fi._url = result.data; fi.load (fi.onuploaddata);} else {if (file. uploaderror! = null) file.uploaderror (fi, result.status);}});}

클래스의 처리는 매우 간단합니다. 일부 파일 정보는 파일 초기화를 통해 초기화되며 가장 중요한 것은 페이지에 해당하는 파일을 포장하는 것입니다. 파일. WebSocket을 통해 서버로 보냅니다.

HTML5에서 복잡한 일을 할 필요는 없습니다.

 ondragenter (e) {e.StopPropagation (); (e) {e.StopPropagation () (RANDEDED '; VAR readFilesize = 0;

ondrop 프로세스 중에 관련 드래그 앤 드롭 파일 만 얻으면 HTML5 튜토리얼을 통해 도움이 될 수 있습니다.

현재 선택한 파일의 관련 FileInfo 객체 만 빌드하고 업로드 메소드를 호출하면됩니다.

 함수 onfileOpen (files) {if (files.length> 0) {for (var i = 0; i <files.length; i ++) {var info = new FileInfo (파일 [i], 32768); ;

업로드 프로세스 이벤트를 통해 파일 업로드 진행 정보 업데이트

 function OnUploadProcess (file) {$ ( '#p_' + file.id) .progressbar ({value : (file.pageindex / file.pages) * 100, text : file.filename + ' + fi le.uploadbytes +' / ' + file.size +'] '});}

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, fileId, base64data.lengt h);} public string uploadfile (String FileId, 문자열 파일 이름, 긴 크기) {console.writeline (fileId : {2}, {0} 크기 : {1}, 크기, 파일 핸들러);

파일 요청을 업로드하는 서버 방법에는 두 가지와 파일 블록 수신 방법을 업로드합니다.

이러한 방식으로 위의 간단한 코드 만 사용하면 업로드 된 정보를 처리하는 데 사용됩니다. Mask Processing Plus Plus Base64의 손실은 실제로 스트리밍 데이터를 제공하는 Arraybuffer가 있습니다.

다운로드 코드 : WebSocketUpload.rar

위는이 기사의 모든 내용입니다.