Official WoguUpload. js tutorial
Description: The HTML5 upload program [supports resumable upload] and chrome, firefox, and ie10.
Author: wogu (Zhang Wenbo)
QQ: 88433062
Version: 1.0
Copyright: free
WoguUpload options:
Persize: the number of bytes sent each time.
Formid: ID of the form to be bound
Id: ID of the file element. If formid is not specified, the upload starts automatically after the onchange event of the file element occurs.
Url: socket server address
Separator: The separator of the command. The default value is "$ ##$"
Filenamepre: file prefix. Typically, the user ID can be used to differentiate files uploaded by different users.
WoguUpload event:
OnProcess (sendsize, size): sendsize indicates the number of sent bytes, and size indicates the total number of bytes. You can use this event to display the progress.
OnComplete (size): the total number of bytes. It is called when the upload is complete.
OnOpen: called when the socket is opened
OnClose: called when the socket is closed, after onComplete
Call example:
[Html]
<! Doctype html>
<Html>
<Head>
<Title> file </title>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Script type = "text/javascript" src = "woguupload. js"> </script>
</Head>
<Body>
<Form id = "myform">
<Input id = "myfile" type = "file"/>
<Input type = "submit" value = "upload">
</Form>
<Span id = "tip"> </span>
</Body>
</Html>
<Script type = "text/javascript">
Var tip = document. getElementById ('tip ');
Var wgup = new WoguUpload ({
'Id': 'myfile ',
'Formid ': 'myform ',
'Url': 'ws: // www.test.com: 9300 ',
'Onprocess': function (sendsize, size ){
Document. getElementById ('tip '). innerHTML = sendsize +'/'+ size;
},
'Oncomplete': function (size ){
Document. getElementById ('tip '). innerHTML = size +'/'+ size;
Alert ('upload complete! ');
},
'Onopen': function (){
Tip. innerHTML = 'onopen ';
},
'Onclose': function (){
Tip. innerHTML = 'onclose ';
}
});
</Script>
Source code of WoguUpload. js
[Javascript]
/**
* HTML5 upload program [supports resumable upload] and chrome, firefox, and ie10
*
* Author: wogu (Zhang Wenbo)
* Version: 1.0
* Copyright: free
* Document:
* Lastmodify: 2012-8-7
*/
Var WoguUpload = function (options ){
Var file, persize, sock, size, sendsize, end, fr, separator, filenamepre;
Var init = function (instance ){
Fr = new FileReader ();
Separator = options. separator | '$ ##$ ';
Filenamepre = options. filenamepre | 'woguupload ';
Size = sendsize = end = 0;
Persize = options. persize | 1024*50/* 50 K */;
Try {
Sock = woguWebSocket (options. url );
Sock. onopen = function (){
If (options. onOpen ){
Options. onOpen ();
}
}
Sock. onmessage = function (event ){
Var cmd = event. data. split (separator );
If ('0' = cmd [0]) {
Sendsize = parseInt (cmd [1]);
Doupload ();
} Else if ('1' = cmd [0]) {
// The data actually written by the server
Var realwrite = parseInt (cmd [1]);
// Resend if the write fails.
If (realwrite = 0 ){
Doupload ();
Return;
}
If (end <size ){
Sendsize = end;
If (options. onProcess ){
Options. onProcess (sendsize, size );
}
Doupload ();
} Else {
If (options. onComplete ){
Options. onComplete (size );
Sock. close ();
}
}
}
}
Sock. onclose = function (){
If (options. onClose ){
Options. onClose ();
}
}
} Catch (e ){
Alert (e );
}
Var elem = document. getElementById (options. id );
If (options. formid ){
Var form = document. getElementById (options. formid );
If (form ){
Form. onsubmit = bind (instance, function (event ){
Upload ();
Return false;
});
}
}
Elem. onchange = bind (instance, function (){
File = elem. files [0];
If (! Form ){
Upload ();
}
});
}
Var woguSlice = function (file, start, end, contentType ){
If (file. Fetch slice ){
Return file. Fetch slice (start, end, contentType );
} Else if (file. webkitSlice ){
Return file. webkitSlice (start, end, contentType );
}
}
Var woguWebSocket = function (url ){
If (window. WebSocket ){
Return new WebSocket (url );
} Else if (window. websocket ){
Return new response websocket (url );
}
}
Var doupload = function (){
End = sendsize + persize;
End = end> size? Size: end;
Var blob = woguSlice (file, sendsize, end );
Fr. readAsArrayBuffer (blob );
Fr. onloadend = function (){
Sock. send (fr. result );
}
}
Var getFileName = function (file ){
Var filename = filenamepre + '-' + file. size;
If (file. lastModifiedDate ){
Var dateinfo = file. lastModifiedDate. toString (). split ('');
Var date = dateinfo [1] + dateinfo [2] + dateinfo [3] + dateinfo [4];
Date = date. replace (/\:/g ,'');
Filename + = '-' + date;
}
Filename + = '-' + file. name;
Return filename;
}
Var upload = function (){
If (! File ){
Return;
}
Size = file. size;
Var filename = getFileName (file );
Var cmd = getCmd ([0, filename]);
Sock. send (cmd );
}
Var bind = function (obj, func ){
Return function (){
Return func. call (obj );
}
}
Var getCmd = function (args ){
Return args. join (separator );
}
Www.2cto.com
Init (this );
}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
