正在加载ajax文件大小

时间:2015-08-01 16:32:42

标签: ajax backbone.js

我发布此问题是this

的延续

Backbone Collection

collection = Backbone.Collection.extend({
    url:fetchedUrl,
    model:model,
    parse:function(response){
    return response;
    }
});
source = new collection;
  source.fetch({
  success:function(a,b,c){
    ajaxLoad(c);
    var Table = new TableView({collection:source});
    Table.render();
  }
});

另一项功能

function ajaxLoad(call){

console.log(call);

// Output : Object { success: .fetch/options.success(), parse: true, error: wrapError/options.error(), emulateHTTP: false, emulateJSON: false, xhr: Object }

console.log(call.xhr.getResponseHeader('Content-Length') + ' bytes');

//Output 420358 bytes

}

我能够获得总文件大小。但我想展示加载数据的进度。加载了多少大小。

示例:

100字节/ 420358字节

200字节/ 420358字节

300字节/ 420358字节

400字节/ 420358字节

500字节/ 420358字节 ....

我得到了值420358.我将如何获得100,200等的值,

1 个答案:

答案 0 :(得分:1)

Content-Length为您提供了它在这里无法帮助您的总长度。 此外,它不起作用,因为当请求结束并且您的结果已从服务器发送时执行“成功”功能。

这是一个使用Jquery

覆盖fetch函数的工作
var SomeView = Backbone.View.extend({
    loadStuff: function(){
        var self = this;
        someModel.fetch({
            xhr: function() {
                var xhr = $.ajaxSettings.xhr();
                xhr.onprogress = self.handleProgress;
                return xhr;
            }
        });
    },
    handleProgress: function(evt){
        var percentComplete = 0;
        if (evt.lengthComputable) {  
            percentComplete = evt.loaded / evt.total;
        }
        //console.log(Math.round(percentComplete * 100)+"%");
    }
});

我有这个想法,但我不得不承认我在这里采用了实现/代码示例。 Backbone.js progress bar while fetching collection

我希望它有所帮助。