Блог

У меня есть скрипт, который отправляет видео на base64 на сервер через backbone / ajax:

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

Я пытаюсь найти способ создать индикатор выполнения загрузки, аналогичный тому, как это работает, но полностью внутри backbone.

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