仅在文件上传开始时显示进度条答案

【问题标题】：Show progress bar only if file upload starts仅在文件上传开始时显示进度条
【发布时间】：2020-04-17 11:19:33
【问题描述】：

我正在使用 jQuery 和 Ajax 上传文件，并且我还有一个进度条来显示上传进度。一切都很好，除了我希望这个进度条只有在上传进度开始时才出现，而不是在我从 Laravel 控制器收到验证错误时出现。我该怎么做？

这是我的代码：

$('[type="file"]').change(function () {
    var formData = new FormData();
    formData.append('video', $(this)[0].files[0]);
    $.ajax({
        url: '/url',
        type: 'POST',
        cache: false,
        processData: false,
        contentType: false,
        data: formData,
        headers: {
            'X-CSRF-TOKEN': $('[name="csrf-token"]').attr('content')
        },
        xhr: function () {
            var xhr = new window.XMLHttpRequest();
            xhr.upload.addEventListener('loadstart', function () {
                $('#progressbar').fadeIn(100);
            });
            xhr.upload.addEventListener('progress', function (e) {
                if (e.lengthComputable) {
                    var percentageComplete = (e.loaded / e.total) * 100;
                    $('#progressbar span').css('width', percentageComplete + '%');
                }
            });
            return xhr;
        },
        success: function (response) {
            if (response.status == 'error') {
                $(this).parent().append('<p class="text-danger" role="alert">' + response.message + '</p>');
            } else {
                //
            }
        }
    });
});

【问题讨论】：

标签： jquery ajax laravel progress

【解决方案1】：

基于loaded 值高于0，将显示进度条的逻辑移至progress 处理程序：

var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener('progress', function(e) {
  if (e.lengthComputable) {
    if (e.loaded)
      $('#progressbar').fadeIn(100);

    var percentageComplete = (e.loaded / e.total) * 100;
    $('#progressbar span').css('width', percentageComplete + '%');
  }
});

【讨论】：

我选择视频文件以外的文件，e.loaded显示大于0的数字怎么办？在这种情况下，我还会收到错误消息（来自控制器），说明文件应该是视频类型。
好点。如果您在服务器端进行验证，这是一件好事，那么我相信您不能让进度条按照您的要求行事。这是因为必须传输一些数据才能让服务器验证内容类型、MIME 类型等。无论服务器是否乐意接受请求，XHR 对象都会始终检测到这种数据传输。在这种情况下，您所能做的就是在发生错误时再次隐藏进度条。