Javascript 拉维阿贾克斯进度条

我有下面的脚本，我试图得到上传进度的百分比，但没有显示，直到我的文件上传完全

代码

$（文档）.ready（函数（）{
$（'.nationBtn'）。在（'click'，函数（e）上{
e、 预防默认值（）；
$.ajaxSetup({
标题：{
'X-CSRF-TOKEN'：$（'meta[name=“CSRF-TOKEN”]）.attr（'content'））
}
});
var form=$（this）.closest（'form'）；
var fd=新FormData（）；
fd.append（'national'，$（'#national'）[0]。文件[0]）；
$.ajax({
beforeSend:function（）{
$（'.progress bar'）.text（'0%'）；
$（'.progress bar'）.css（'width'，'0%'）；
},
上载进度：功能（事件、位置、总数、完成百分比）{
$（“.progress bar”）.text（完成百分比+“%”）；
$（'.progress bar'）.css（'width'，percentComplete+'%'）；
},
url:form.attr（'action'），
数据：fd，
键入：“POST”，
processData:false，
contentType:false，
成功：功能（数据）{
if（data.error）{
$（'.progress bar'）.text（'0%'）；
$（'.progress bar'）.css（'width'，'0%'）；
}
if（data.success）{
$（'.progress bar'）.text（'已成功上载'）；
$（'.progress bar'）.css（'width'，'100%'）；
}
}
});
});
});

@csrf@method（'POST'））
0%
上传
存在一个问题，您的csrf令牌没有随标头一起传递，因此我对您的脚本进行了一些更改，请参见下面的代码，
您不需要单独附加每个字段，当触发on（'submit'）事件时，整个表单可以通过新的FormData（此）传递

$(document).ready(function() {
  $('form').on('submit', function(e) {
    e.preventDefault();
    $.ajaxSetup({
      headers: {
        'X-CSRF-TOKEN': $('meta[name=""csrf-token""]').attr('content')
      }
    });
    var form = $(this).closest('form');
    var fd = new FormData(this);
    /* fd.append('national', $('#national')[0].files[0]);
    fd.append('_token',$(document).find('input[name=""_token""]').val()) */

    $.ajax({
      beforeSend: function() {
        $('.progress-bar').text('0%');
        $('.progress-bar').css('width', '0%');
      },
      UploadProgress: function(event, position, total, percentComplete) {
        $('.progress-bar').text(percentComplete + '%');
        $('.progress-bar').css('width', percentComplete + '%');
      },
      url: form.attr('action'),
      data: fd,
      type: 'POST',
      processData: false,
      contentType: false,

      success: function(data) {
        if (data.error) {
          $('.progress-bar').text('0%');
          $('.progress-bar').css('width', '0%');
        }

        if (data.success) {
          $('.progress-bar').text('Uploaded successfully.');
          $('.progress-bar').css('width', '100%');
        }
      }
    });
  });
});
  </script>

$（文档）.ready（函数（）{
$（'form'）。关于（'submit'，函数（e）{
e、 预防默认值（）；
$.ajaxSetup({
标题：{
“X-CSRF-TOKEN”：$（“meta[name=”“CSRF-TOKEN”“]）.attr（'content'）
}
});
var form=$（this）.closest（'form'）；
var fd=新的FormData（本）；
/*fd.append（'national'，$（'#national'）[0]。文件[0]）；
fd.append（“\u-token”，$（document.find（'input[name=”“\u-token”“]）.val（））*/
$.ajax({
beforeSend:function（）{
$（'.progress bar'）.text（'0%'）；
$（'.progress bar'）.css（'width'，'0%'）；
},
上载进度：功能（事件、位置、总数、完成百分比）{
$（“.progress bar”）.text（完成百分比+“%”）；
$（'.progress bar'）.css（'width'，percentComplete+'%'）；
},
url:form.attr（'action'），
数据：fd，
键入：“POST”，
processData:false，
contentType:false，
成功：功能（数据）{
if（data.error）{
$（'.progress bar'）.text（'0%'）；
$（'.progress bar'）.css（'width'，'0%'）；
}
if（data.success）{
$（'.progress bar'）.text（'已成功上载'）；
$（'.progress bar'）.css（'width'，'100%'）；
}
}
});
});
});