您的位置：首页 > Web前端 > HTML5

WoguUpload1.1 - HTML5断点续传

2012-08-13 15:54 148 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航