WoguUpload.js 官方 教程
描述： HTML 5上传程序[支持断点续传]，支持ch rom e,firefox,ie10
作者：wogu(张文博)
QQ ：88433062
版本：1.0
版权：免费
WoguUpload的选项：
PE r Size: 每次发送的 字节数
formid: 要绑定的表单ID
id: file元素的ID。如果没有指定formid，则file元素的onchange事件发生后，自动 开始 上传
url: socket服务端地址
separator: 命令的分隔符，默认是"$$ # #$$"
filen am e PR e: 文件前缀。典型的，可以是用户ID，以区分不同用户上传的文件
WoguUpload的事件：
onProcess(sendsize, size): sendsize为已发送字节数，size为总字节数。可以用此事件完成 进度 显示
onComp let e(size): size为总字节数，上传完成 时调 用
onOpen: socket打开时调用
onClose: socket关闭时调用，发生于on complete 之后
调用示例：
[ht ML ]&nbs p;
<!DOCTYPE HTML>
<html>
<head>
<t IT le>file</title>
< ;m eta http-equiv="Content -t ype" 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="s ub mit" 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('上传完成！');
},
'onOpen' : function() {
tip.innerHTML = 'onopen';
},
'onClose' : function() {
tip.innerHTML = 'onclose';
}
});
</script>
WoguUpload.js 源 代码
[javascript]
/**
* HTML5上传程序[支持断点续传]，支持c hr ome,firefox,ie10
*
* author: wogu(张文博)
* 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/*50K*/;
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 = pars ei nt(cmd[1]);
doupload();
} else if('1' == cmd[0]) {
// 服务器 真实写入的数据
var realwrite = parseInt(cmd[1]);
//如果写入失败则重新发送
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.mozSlice) {
return file.mozSlice(start, end, contentType);
} else if(file. webkit Slice) {
return file.webkitSlice(start, end, contentType);
}
}
var woguWebSocket = function(url) {
if(window.WebSocket) {
return new WebSocket(url);
} else if(window.MozWebSocket) {
return new MozWebSocket(url);
}
}
var doupload = function() {
end = sendsize + persize;
end = end > size ? size : end;
var blob = woguSlice(file, sendsize, end);
fr.readAs Array Buffer(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( arg s) {
return args.join(separator);
}
www.2cto.com
init( this );
}
作者：xiao DAO 1986
总结
以上是 为你收集整理的 HTML5断点续传 全部内容，希望文章能够帮你解决 HTML5断点续传 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。