物化预加载器和Ajax文件上传错误

Question

我正在使用Materialize Preloader显示视频上传进度。但是它也不是很好。我将Ajax设置如下：

 $(document).ready(function(){
   var bar     = $('.determinate');
   var percent = $('.percent');
   $('#upload_video').ajaxForm({
     beforeSend: function() {
         status.empty();
         var percentVal = '0%';
         var posterValue = $('input[name=video]').fieldValue();
         bar.css("width", percentVal);
     },
     uploadProgress: function(event, position, total, percentComplete) {
         var percentVal = percentComplete + '%';
         bar.css("width", percentVal);
     },
     success: function() {
         var percentVal = 'Wait, Saving';
         bar.css("width", percentVal);
     },
     complete: function(xhr) {
         status.html(xhr.responseText);
         alert('Uploaded Successfully');
     }
    });
});

上传文件格式：

      <form id="upload_video" method="POST" action="http://localhost:8000/admin/class/store_video" enctype="multipart/form-data">

      <div class="row" style="margin-left:5px; margin-right:5px;margin-top:40px;">
        <div class="col s12">
          <div class="file-field input-field">
           <div class="btn amber">
             <span>Video Attachment</span>
             <input type="file" name="video">
           </div>
           <div class="file-path-wrapper">
             <input class="file-path validate" type="text">
           </div>
         </div>

         @if($errors->has('video'))
           <p class="notification red white-text">{{$errors->first('video')}}</p>
         @endif
       </div>
      </div>

      <button name="button" class="btn amber modal-close waves-effect right">Confirm</button>

      {{ csrf_field() }}
      </form>

还有Materialise预加载器：

<div id="progress" class="progress amber lighten-4">
    <div class="determinate amber"></div>
</div>

我不知道为什么会这样，我想我已经按照指示进行了。谢谢。