HTML, JS, PHP show upload progress (xhr.upload.addEventListener())

 Jquery + PHP implementation :

http://talkerscode.com/webtricks/file-upload-progress-bar-using-jquery-and-php.php

The main function used by Jquery or JS  to achieve front end progress bar is

 xhr.upload.addEventListener("progress", ()=> {});

https://stackoverflow.com/questions/15410265/file-upload-progress-bar-with-jquery

https://stackoverflow.com/questions/3352555/xhr-upload-progress-is-100-from-the-start

The XMLHttpRequest upload property returns an XMLHttpRequestUpload object that can be observed to monitor an upload's progress. It is an opaque object, but because it's also an XMLHttpRequestEventTarget, event listeners can be attached to track its process.

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/upload