HTML5文件加载进度管理

/**
     * 文件加载进度管理 
     */
    DownloadUtils = function(options){
        options = options || {};
        this.init(options);
    };
    
    DownloadUtils.prototype = {
        init:function(options){
            var _this = this;
            this.url = options.url;
            var xhr = new XMLHttpRequest();
            xhr.open("get", this.url, true);
            xhr.onload = function() {
                if (xhr.status == 200) {
                    //TODO    
                }
            }
            xhr.onloadend = function(){
                if(typeof options.onComplete == "function"){
                    options.onComplete();
                }
            }
            xhr.onprogress = function(event){
                if(event.lengthComputable){
                    if(typeof options.onProgress == "function"){
                        options.onProgress(event.loaded, event.total);
                    }
                }
                else{
                    if(typeof options.onProgressError == "function"){
                        options.onProgressError();
                    }
                }
            }
            xhr.send();
        }
    };

 

 

new DownloadUtils({
    url:images[i],
    onProgress:function(loaded, total){
        var percentage = (loaded * 100/ total) + '%';
        console.log(percentage);
    },
    onProgressError:function(){
        console.log("onProgressError");
    },
    onComplete:function(){
        console.log("onComplete");
    }
});

 

posted @ 2015-04-08 10:03  rubekid  阅读(352)  评论(0编辑  收藏  举报