HTML5断点续传

WoguUpload.js官方教程

描述：HTML5上传程序[支持断点续传]，支持chrome,firefox,ie10
作者：wogu(张文博)
QQ：88433062
版本：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之后

调用示例：
[htML] 
!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源代码
[javascript] 
/**
 * 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);  
    }  
     www.2cto.com
    init(this);  
}  

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！