Javascript Backbone.js base64视频上传,带进度条

Javascript Backbone.js base64视频上传,带进度条,javascript,jquery,backbone.js,Javascript,Jquery,Backbone.js,我有一个脚本,可以通过主干/ajax将base64视频发送到服务器: video = new AccountVideo(); video.set({video: imageFile}); this.collection.create(video, { // wait for return status from server wait: true, success: function(model, response) {

我有一个脚本,可以通过主干/ajax将base64视频发送到服务器:

    video = new AccountVideo();
    video.set({video: imageFile});
    this.collection.create(video, {
        // wait for return status from server
        wait: true,
        success: function(model, response) {
            App.utils.notifyEnd('Video is queued for transcoding.');

            accountVideoListView.render();
        },
        error: function(model, xhr) {
            App.utils.notifyEnd(xhr.responseJSON.message, 'error');
        }
    });
我正在尝试创建一个上传进度条,与此类似,但完全在主干内

    var ajax = new XMLHttpRequest(); 
            ajax.upload.addEventListener("progress", progressHandler, false); 
            ajax.addEventListener("load", completeHandler, false); 
            ajax.open("POST", "/api/accounts/videos"); 
            ajax.send(imageFile); 

        function progressHandler(event){ 
            var percent = (event.loaded / event.total) * 100; 
            console.log(percent); 
        } function completeHandler(event){ 
        }
我试过:

     var self = this;

     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)+"%");
      }

但在视频结束后,它只显示0%。我想我很接近,只需要一个指针。谢谢

好的,我四处看看,了解了更多关于xhr:函数的情况

这就是有效的方法

 // add image model to collection
    this.collection.create(video, {
        // wait for return status from server
        wait: true,
        success: function(model, response) {
            App.utils.notifyEnd('Video is queued for transcoding.');

            accountVideoListView.render();
        },
        error: function(model, xhr) {
            App.utils.notifyEnd(xhr.responseJSON.message, 'error');
        },

        xhr: function() {
        myXhr = $.ajaxSettings.xhr();
            if(myXhr.upload){
                myXhr.upload.addEventListener('progress',showProgress, false);
            } else {
                console.log("Upload progress is not supported.");
            }
        return myXhr;
        }
    });

    function showProgress(evt) {
        if (evt.lengthComputable) {
            var percentComplete = (evt.loaded / evt.total) * 100;
            console.log(percentComplete);
        }  
    }