欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

HTML5断点续传

程序员文章站 2022-05-06 22:01:49
woguupload.js官方教程 描述：html5上传程序[支持断点续传]，支持chrome,firefox,ie10 作者：wogu(张文博) qq：88433062 版本：1.0 版权：免费...

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); 
} 


作者：xiaodao1986

上一篇： flashfxp.exe是什么进程 作用是什么 flashfxp进程查询

下一篇： Linux下查看一个进程占用了哪个端口的方法

推荐阅读