仅当文件上载开始时显示进度条

Question

我使用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 {
//
}
}
});
});

Answer 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 + '%');
}
});