<script> function update__account_avatar(original) { var $input = $("#update_photo_form__account"); var fd = new FormData; fd.append('photo', $input.prop('files')[0]); $.ajax({ dataType: 'json', url: '/data/users/avatar/upload', data: fd, processData: false, contentType: false, type: 'POST', success: function (data) { if (data.status == 'error') { var notyf = new Notyf(); notyf.alert(data.msg); $("#update_photo_src__account").attr("src", original); } else { var notyf = new Notyf(); notyf.confirm(data.msg); $("#update_photo_src__account").attr("src", data.src); } } }); } </script>

How to display in real time how much data (in percent) has already been transmitted to the server?

1 answer 1

 function update__account_avatar(original) { var $input = $("#update_photo_form__account"); var fd = new FormData; fd.append('photo', $input.prop('files')[0]); $.ajax({ xhr: function() { var xhr = new window.XMLHttpRequest(); xhr.upload.addEventListener("progress", function(evt) { if (evt.lengthComputable) { var percentComplete = evt.loaded / evt.total; percentComplete = parseInt(percentComplete * 100); console.log(percentComplete); if (percentComplete === 100) { // } } }, false); return xhr; }, dataType: 'json', url: '/data/users/avatar/upload', data: fd, processData: false, contentType: false, type: 'POST', success: function (data) { if (data.status == 'error') { var notyf = new Notyf(); notyf.alert(data.msg); $("#update_photo_src__account").attr("src", original); } else { var notyf = new Notyf(); notyf.confirm(data.msg); $("#update_photo_src__account").attr("src", data.src); } } }); }