HTML5+WebSocket implements examples of multi -file uploading at the same time

Uploading multiple files at the same time in the traditional HTTP application and uploading and viewing the progress of uploading is a very troublesome thing. Of course The control of and uploading is very flexible. HTML5 provides a series of AIPs for file reading, including the content of a piece of document is also very convenient. Combined with WebSocket's transmission of file HTML5 combines WebsoCet to simply implement multi -file uploading applications at the same time.

Probably preview the functions you need to do:

The main function is that the user can directly drag and drop the file of the folder into the webpage and upload it. During the upload process, the upload progress information is displayed.

In order to facilitate reading file information, a simple file information read object class is encapsulated at the basis of the original FILE.

 Function FileInfo (File, PAGESIZE) {this.size = file.size; this.file = file; this.filetype = file.type; this.filename = file.name; Ze = PageSize; this.pageindex = 0; this.pages = 0; this.Uploaderror = NULL; this.uploadProcess = null; this.dataBuffer = null; this.uploadBytes = 0; this.id = math.floor (m.floor ath.random () * 0x10000) .tring (16 ); :loadCallback = null; if (math.floor (this.Size % this.pageSize)> 0) {this.pages = math.floor ((this.size / this.pageSize)) + 1;} E} lse { 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 uINT8ARAY (this.dataBuffer) var len = bytes.bytelength; for (var I = 0; i <len; i ++) {binary+= string.fromCharCode (by TES [i]) } Return Window.btoa (BINARY);} FileInfo.prototype.onloaddata = Function (EVT) {var obj = EVT.TARGET [tag]; if (EVT.TARGET.ReadyState == FILEREREADER. Done) {Obj.databuffer = EVT .target.Result; if (Obj.loadCallback! = NULL) obj.loadCallback (obj);} else {if (obj.uploaderror! = null) obj.uploaderror (fi, evt.target.er ror);}} FileInfo. Prototype.load = FUNCTION (Completed) {this.loadCallback = Completed; if (this.filereader == NULL || This.fileRereader == Undefined) der = New Filereader (); VAR Reader = this.filereeder; Reader [ tag] = this; reader.onloadnd = this.onloaddata; var count = this.size -this.pageindex * this.pageSize; if (count> this.pageSize) Count = Thi s.pagesize; this.Uploadbytes += Count; var blob = this.file.slice (this.pageindex * this.pageSize, this.pageindex * this.pageSize + Count); Reader.readasarraybuffer (blob); Filein fo.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.UPLOADPR. OCESS (File); if (File.PageIndex < file.pages) {file.load (file.onuploaddata);}} Else {if (file.uploaderror! = null) file.Uploaderror (file, data.status);}); pe.upload = function (Channel, url) {var fi = this; channel.send ({url: url, parameters: {filename: fi.filename, size: fi.size, fileid: fi.id}}, function (result) { if (if (if (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);}});}

The processing of the class is very simple. Some file information is initialized through the File initialization and specified the size of the block, such as the number of pages and pages. Of course, the most important thing is to pack the files corresponding to the file. Send to the server by WebSocket.

It is not necessary to do complicated things in HTML5 to be dragged in HTML5. You only need to bind related events for container elements.

 Function onDragenter (e) {e.stopPropagation (); e.PreventdeFault ();} Function onDragover (e) {e.stoppropagation (); e.PreventDefault (); ox) .addclass ('Rounded');} Function onDragleave (e) {e.stopPropagation (); e.preventdeFault (); $ (Dropbox) .RmoveClass ('Rounded');} Function ondrop (e) agation (); e.PreventdeFault (); $ (Dropbox) .removeClass ('Roundeded'); VAR ReadFilesize = 0; VAR FILES = E.DATATRANSFER.FILES; IF (Files.Length> 0) {OnfileOpen (FILES);}}

You only need to obtain related drag and drop files during the ONDROP process. These may be helpful through some HTML5 tutorials.

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

 Function onFileOpen (Files) {if (Files.Length> 0) {for (var I = 0; I <files.length; i ++) {var info = new fileinfo (Files [i], 32768); O ).;

Update the upload file progress information through the UPLOADPROCESS event

 Function OnuploadProcess (File) {$ ('#p_' + file.id) .progressbar ({Value: (file.pageindex / file.pages) * 100, Text: File.filename + ' + Fi le.uploadbytes + ' /' + file.size +'] '});}

With the help of Beetle's support for websocket, the implementation of the corresponding server 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, FileId, BASE64Data.LENGT h);} 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 in the server method of uploading file requests, and an upload file block receiving method.

You only need the above simple code to achieve multi -file uploading function. In this way, JSON is used to process the uploaded information, so the file stream must perform a base64 encoding processing. Because the data you browse and submitted by WebSocket generally have MASK processing plus plus plus plus Base64's loss is relatively heavy. In fact, WebSocket has an ArrayBuffer that provides streaming data. Of course, this processing is not convenient and simple in operation.

Download code: websocketupload.rar

The above is all the contents of this article. I hope it will be helpful to everyone's learning. I also hope that everyone will support VEVB Wulin.com.