Vanilla Javascript - #33 Progress Bar e Outras Propriedades Ajax

10/07/2019

Nessa vídeo aula veremos algumas outras propriedades interessantes do ajax e como exemplo faremos uma progress bar.

HTML

No nosso html criaremos uma div pra abrigar o resultado, a div que receberá a barra de progresso e o formulário de envio dos dados.

<!doctype html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Ajax com PHP</title>
</head>

<body>
    <div id="result"></div>
    <div class="bar" style="width:100%; height: 20px;"><div class="progress" style="width:0; background: blue; height: 20px;"></div></div>
    <form name="form1" id="form1" method="post" action="controller.php" enctype="multipart/form-data">
        <input type="file" name="files" id="files"><br>
        <input type="submit" name="btn" id="btn" value="Salvar">
    </form>

    <script src="javascript.js"></script>
</body>
</html>

controller.php

No nosso arquivo controller.php vamos ter um move_upload_file simples, apenas para exemplo:

<?php
$files=$_FILES['files'];
move_uploaded_file($files['tmp_name'],"C:/wamp64/www/$files[name]");

Repare no código acima que estou enviando o arquivo pra raiz do meu projeto.

Javascript

No javascript faremos a mágica do ajax, aprendendo alguns aspectos novos que são o onloadstart, onloadend, upload.onprogress:

(function readyJS(win,doc){

    'use strict';

    let form1=doc.querySelector('#form1');

    //Submit form
    function sendForm(event)
    {
        event.preventDefault();
        let ajax=new XMLHttpRequest();
        let formData=new FormData(form1);
        let btn=doc.querySelector('#btn');
        let result=doc.querySelector('#result');
        let progress=doc.querySelector('.progress');
        ajax.open('POST','controller.php');
        ajax.onloadstart=function () {
            btn.value='Carregando...';
        };
        ajax.upload.onprogress=function (event) {
            if(event.lengthComputable){
                progress.style.width=((event.loaded*100)/event.total)+'%';
            }
        };
        ajax.onloadend=function () {
            btn.value='Salvar';
            progress.style.display='none';
            result.innerHTML='Foto carregada com sucesso!';
        };
        ajax.send(formData);
    }
    form1.addEventListener('submit',sendForm,false);

})(window,document);

No código acima conseguimos preencher nossa barra de progresso.

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

Receba as aulas da Webdesign em Foco em Seu Email

Posts Relacionados

Vanilla Javascript - #32 Ajax com NodeJS II

Nessa segunda aula da utilização do ajax com NodeJS trabalharemos com o método post. Para tanto, setaremos e enviaremos os parâmetros.

Vanilla Javascript - #34 Herança Prototípica

Nessa vídeo-aula vamos trabalhar com um dos temas mais complexos da linguagem de programação Javascript: a herança prototípica.

Javascript

Ensinaremos durante as aulas a codificação desta importante linguagem de programação.