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