Question

我有一个脚本通过backbone / 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％。我想我很亲近，只需要一个指针。谢谢！

Answer 1

好的，所以我环顾四周，发现了xhr：function的更多内容。

这是什么工作

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

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

1 个答案: