WoguUpload1.1 - HTML5断点续传

最新推荐文章于 2024-08-29 16:07:42 发布

握固

最新推荐文章于 2024-08-29 16:07:42 发布

阅读量2.5k

点赞数 2

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

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

版权

PHP 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

JS/HTML

5 篇文章 0 订阅

订阅专栏

WoguUpload.js官方教程

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

作者：wogu(张文博)

QQ：88433062

PHP交流/兼职群：335343801

版本：1.1
版权：免费

1.1版本的新特性：

1.新增多个多件同时上传的功能

2.BUG修复：解决多个页面同时上传文件产生的错误

3.浏览器兼容性修复

WoguUpload的选项：

persize: 每次发送的字节数

formid: 要绑定的表单ID

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

url: socket服务端地址

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

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

WoguUpload的事件：

onProcess(sendsize, size, index): sendsize为已发送字节数，size为总字节数，index表示正在上传第index个文件（0开始）。可以用此事件完成进度显示

onComplete(count): count表示共上传了count个文件，所有文件上传完成时调用

onOpen: socket打开时调用

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

onItemComplete(index, size, msg): Index表示第index个文件，size表示该文件的大小，msg是服务器的响应内容。此事件在某个文件上传成功时调用

onFileEmpty(): 未选择文件即上传时调用

onSelectChange(files): 选中的文件。此事件在文件选择变化时调用

调用示例：

<!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" multiple="multiple"/>
		<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://127.0.0.1:9300',
	'onProcess' : function(sendsize, size, index) {
		document.getElementById('tip').innerHTML = sendsize+'/'+size;
	},
	'onComplete' : function(count) {
		alert('共' + count + '个文件上传完成！');
	},
	'onOpen' : function() {
		tip.innerHTML = 'onopen';
	},
	'onClose' : function() {
		tip.innerHTML = 'onclose';
	},
	'onItemComplete' : function(index, size, msg) {
		alert('第' + (index+1) + '个文件上传成功！共' + size + '个字节！');
		alert('文件已上传至' + msg);
	},
	'onFileEmpty' : function() {
		alert('请先选择文件！');
	},
	'onSelectChange' : function(files) {
		alert('共选择'+files.length+'个文件！');
	}
});
</script>

下载WoguUpload1.1

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