WoguUpload1.0 - HTML5断点续传

最新推荐文章于 2022-05-09 13:17:02 发布

握固

最新推荐文章于 2022-05-09 13:17:02 发布

阅读量3k

点赞数

分类专栏： JS/HTML PHP 文章标签： html5 function file upload cmd

本文链接：https://blog.csdn.net/xiaodao1986/article/details/7839576

版权

PHP 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

JS/HTML

5 篇文章 0 订阅

订阅专栏

WoguUpload.js官方教程

描述：HTML5上传程序[支持断点续传]，支持chrome,firefox,ie10

作者：wogu(张文博)

QQ：88433062

PHP交流/兼职群：335343801
版本：1.0
版权：免费

WoguUpload的选项：

persize: 每次发送的字节数

formid: 要绑定的表单ID

id: file元素的ID。如果没有指定formid，则file元素的onchange事件发生后，自动开始上传

url: socket服务端地址

separator: 命令的分隔符，默认是"$$##$$"

filenamepre: 文件前缀。典型的，可以是用户ID，以区分不同用户上传的文件

WoguUpload的事件：

onProcess(sendsize, size): sendsize为已发送字节数，size为总字节数。可以用此事件完成进度显示

onComplete(size): size为总字节数，上传完成时调用

onOpen: socket打开时调用

onClose: socket关闭时调用，发生于onComplete之后

调用示例：

<!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('上传完成！');
	},
	'onOpen' : function() {
		tip.innerHTML = 'onopen';
	},
	'onClose' : function() {
		tip.innerHTML = 'onclose';
	}
});
</script>

WoguUpload.js源代码

/**
 * HTML5上传程序[支持断点续传]，支持chrome,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 = parseInt(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.webkitSlice) {
			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.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);
	}
	
	init(this);
}

demo下载

http://download.csdn.net/detail/xiaodao1986/4482744