XHR上传前置事件未触发

问题描述

我试图显示进度条，同时上传附加在FormData对象中的视频Blob。但是，当我保存文件时，仅触发loadstart事件。 progress事件和load事件根本没有触发。但是该文件已成功保存在数据库中。我尝试了SO中所有可用的解决方案，但没有成功。下面是我的代码。

var fd = new FormData();
fd.append("firstName","John");
fd.append('blob',blob,$('#stream-title').html()+'.mp4');
$.ajax({    
      type: 'POST',url: "{% url 'instructor_live' instructor.id %}",headers: {
             'X-CSrftoken': '{{csrf_token}}'
            },data: fd,xhr: function() {
          var xhr = new window.XMLHttpRequest();
          var progress = $('#progress-bar').get(0);

          xhr.upload.addEventListener("loadstart",function(evt) {
          console.log(evt)
         },false);

          xhr.upload.onprogress =  function(evt) {
          console.log(evt.loaded/evt.total * 100)
          var percent = Math.round(evt.loaded/evt.total * 100)
          console.log(percent);
                                              
          progress.css('background-color','red')
          progress.css('width',percent*4)
                                              
                                              
          };
          xhr.upload.addEventListener("load",function(evt) {
          progress.css('background-color','green').delay(2000)
         // setTimeout(location.reload.bind(location),10000);

         },false);

        return xhr;
        },processData: false,contentType: false,success:function(){
        console.log('done!')
        }
       });
      });

视频Blob是RecordRTC Blob。

致谢。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

ajax javascript recordrtc rtcmulticonnection