Múltiplos Uploads com PHP, Mysql e Ajax - #15 Progress Bar

Neste tutorial iremos incrementar nosso sistema de uploads inserindo a barra de progresso para que o usuário consiga acompanhar o desenvolvimento de seus uploads em tempo real.

Barra de progresso de uploads no PHP

Para trabalhar com a barra de progresso nós utilizaremos o ajax.upload.onprogress. Nós implementaremos isso na nossa função upload do javascript que ficará assim:

//Upload
function upload() {
    let ajax=new XMLHttpRequest();
    let formData=new FormData(doc.querySelector('#form'));
    let bar=doc.querySelector('.bar');
    let progress=doc.querySelector('.progress');

    ajax.open('POST',getRoot()+'controllers/controllerUpload');
    ajax.upload.onprogress=function(event){
        if(event.lengthComputable){
            bar.style.display='block';
            progress.style.width=((event.loaded*100)/event.total)+"%";
        }
    };
    ajax.onloadend=function(){
        bar.style.display='none';
      let divFiles=doc.querySelector('.divFiles');
      divFiles.style.display='block';
      divFiles.innerHTML=ajax.responseText;
    };
    ajax.send(formData);
}
if(doc.querySelector('#files')){
    let files=doc.querySelector('#files');
    files.addEventListener('change',upload,false);
}

Por hoje é só! Sucesso nos códigos e na vida.