Progress bar does not load

6

I have the code below, which feeds a progress bar while uploading the file to upload. Home What happens is this: In some browsers, like Chrome and Opera, it works normally. In Firefox and Safari not. Is there anything I could do in my code to be compatible with all browsers?

Charging function:

<script>
function upload() {
  var request = new XMLHttpRequest();
  request.upload.addEventListener("progress", uploadProgress, false);

  //envia o form
  var formData = new FormData();
  formData.append("file", document.getElementById('arquivo').files[0]);
  request.open("POST", "SalvarArquivo.php");
  request.send(formData);
}

function uploadProgress(event) {
  if (event.lengthComputable) {
    var percent = Math.round(event.loaded * 100 / event.total); //cálculo simples de porcentagem.
    document.getElementById('progressbar').value = percent; //atualiza o valor da progress bar.
  } else {
    document.getElementById('progressbar').value = 50; //atualiza o valor da progress bar.
  }
}
</script>

HTML:

Andamento:<br><progress id="progressbar" value="0" max="100"></progress><br>

SaveFile.php

<?php
/* Arquivo: SalvarArquivo.php
 *
 * Este script salva o arquivo enviado e gera o link para envio por email.
 *
 * Dados de Origem: index.php
 *
 */

// Dados do banco
include "js/conn.php";

//Testa de o POST veio vazio, se sim volta para a página inicial
if (empty($_POST)) {
  ?><script>
  window.location.href = 'index.php';
  </script><?
  exit;
}

//Gera nome aleatório para cada arquivo
$tamanho = mt_rand(5,9);
$all_str = "abcdefghijlkmnopqrstuvxyzwABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890";
$nome = "";
for ($i = 0;$i <= $tamanho;$i++){
   $nome .= $all_str[mt_rand(0,61)];
}

//Pega hora do click
$hora_inicial = $_POST['hora_inicio'];
//endereços de emails para envio e do remetente
$email_remetente = $_POST['email_remetente'];
$email_destinatario = $_POST['email_destinatario'];
$observacoes = utf8_encode($_POST['observacoes']);
if (empty($observacoes)) { $observacoes = utf8_encode('NÃO INFORMADAS'); }
//ip do cliente
$ip_envio = $_SERVER["REMOTE_ADDR"];
$tamanho = $_FILES['arquivo']['size'];  //em bytes

// Pasta onde o arquivo vai ser salvo
$_UP['pasta'] = 'BASE/';

// Tamanho máximo do arquivo (em Bytes)
$_UP['tamanho'] = 5147483648; // 5GB

// Array com as extensões permitidas
$_UP['extensoes'] = array('pdf', 'doc', 'xls', 'xlsx', 'docx', 'html', 'zip', 'rar', 'jpg', 'jpeg', 'png', 'iso', 'cdr', 'ppt', 'pptx', 'mp3', 'avi', 'mp4', 'mpeg', 'mpg', 'mov');

// Array com os tipos de erros de upload do PHP
$_UP['erros'][0] = 'Não houve erro';
$_UP['erros'][1] = 'O arquivo no upload é maior do que o limite do PHP';
$_UP['erros'][2] = 'O arquivo ultrapassa o limite de tamanho especifiado no HTML';
$_UP['erros'][3] = 'O upload do arquivo foi feito parcialmente';
$_UP['erros'][4] = 'Não foi feito o upload do arquivo';

// Verifica se houve algum erro com o upload. Se sim, exibe a mensagem do erro
if ($_FILES['arquivo']['error'] != 0) {
  die("Não foi possível fazer o upload, erro:
  " . $_UP['erros'][$_FILES['arquivo']['error']]);
exit; // Para a execução do script
}

// Caso script chegue a esse ponto, não houve erro com o upload e o PHP pode continuar

// Faz a verificação da extensão do arquivo
$extensao = @strtolower(end(explode('.', $_FILES['arquivo']['name'])));
if (array_search($extensao, $_UP['extensoes']) === false) {
            //extensão inválida
            ?>
              <html>
                <head>
                  <script src="sweet/dist/sweetalert.min.js"></script>
                  <link rel="stylesheet" type="text/css" href="sweet/dist/sweetalert.css">
                </head>
                <body>
                  <script>
                   sweetAlert({
                         title: "Erro!",
                         text: "Extensão <? print($extensao);?> não permitida!",
                         type: "error"
                      },
                      function () {
                        window.location.href = 'index.php';
                   });
                  </script>
                </body>
               </html>
            <?
            exit;
}

// Faz a verificação do tamanho do arquivo
else if ($_UP['tamanho'] < $_FILES['arquivo']['size']) {
            //tamanho maior que o permitido
            ?>
              <html>
                <head>
                  <script src="sweet/dist/sweetalert.min.js"></script>
                  <link rel="stylesheet" type="text/css" href="sweet/dist/sweetalert.css">
                </head>
                <body>
                  <script>
                   sweetAlert({
                         title: "Erro!",
                         text: "O arquivo enviado é muito grande, envie arquivos de até 5 GB.",
                         type: "error"
                      },
                      function () {
                        window.location.href = 'index.php';
                   });
                  </script>
                </body>
               </html>
            <?
}
// O arquivo passou em todas as verificações, hora de tentar movê-lo para a pasta
else {

//Grava o numero mais a extensão verificada no inicio do arquivo
$nome_final = $nome.'.'.$extensao;
// Mantém o nome original do arquivo
//$nome_final = $_FILES['arquivo']['name'];

// Depois verifica se é possível mover o arquivo para a pasta escolhida
if (move_uploaded_file($_FILES['arquivo']['tmp_name'], $_UP['pasta'] . $nome_final)) {
// Upload efetuado com sucesso, exibe uma mensagem e um link para o arquivo

//link para o arquivo enviado
$server = "http://200.208.251.153/ptransfer/";
$anexo = $server.$_UP['pasta'].$nome_final;

include ("EnviarEmail.php");
//echo '<br><a href="'.$anexo.'">Baixar anexo</a>';

} else {

// Não foi possível fazer o upload, provavelmente a pasta está incorreta
echo "Não foi possível enviar o arquivo, tente novamente";
print_r(error_get_last());
}

}// FECHA ELSE VERIFICAÇÕES
?>
    
asked by anonymous 04.05.2016 / 12:48

1 answer

4

It seems that you have to set progressbar.max also to update it.

In my tests it works like this in Chrome and Safari:

if (event.lengthComputable) {
    progressbar.max = event.total;
    progressbar.value = event.loaded;

jsFiddle: link

    
07.05.2016 / 01:07