WoguUpload1.1 - HTML5斷點續傳

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

發佈了65 篇原創文章 · 獲贊 57 · 訪問量 18萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章