2

Estou usando as funções abaixo para fazer uma barra de progresso:

<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) {
    progressbar.max = event.total;
    progressbar.value = event.loaded;
   // 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>

E um campo para "mostrar" o andamento:

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

Mas o que acontece é que funciona apenas no Opera e no Chrome. No Firefox e no Safari não funciona. O processo de upar o arquivo, enviar email e registrar em banco funciona em qualquer navegador, mesmo a exibição do andamento do upload. Estou fazendo algo errado?

FORM

         <form id="cadastro" name="cadastro" enctype="multipart/form-data" method="POST" action="SalvarArquivo.php" onsubmit="salvar.disabled = true; salvar.value='AGUARDE...'; return true;">
             <center><input type="email" name ="email_remetente" id="email_remetente" placeholder="Digite o seu email" maxlength = "50" required>
                     <input type="email" name ="email_destinatario" id="email_destinatario" placeholder="Digite o email do destinatário" maxlength = "50" required><br>
                     <textarea rows="1" cols="50" id="observacoes" name="observacoes" placeholder="Digite alguma observação, se houver." maxlength="50"></textarea><br>
                     <input type="hidden" id="hora_inicio" name="hora_inicio">
                     <input type="file" id="arquivo" name="arquivo" required>
                     <input type="button" id="animate-slide" value="Extensões permitidas" />
                     <p class="neat">
                        Extensões autorizadas: pdf, doc, xls, xlsx, docx, html, zip, rar, jpg, jpeg, png, iso, cdr, ppt, pptx, mp3, avi, mp4, mpeg, mpg, mov, wmv.<br>
                        <u>--> TAMANHO MÁXIMO PARA UPLOAD: 3GB. <--</u>
                     </p>
                     <br>Andamento:<br><progress id="progressbar" value="0" max="100"></progress><br>
                     <input type = "submit" id="salvar" name="salvar" onclick="javascript:upload();" value = "ENVIAR!" class="btn">

                    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
                    <!-- Peccin -->
                    <ins class="adsbygoogle"
                         style="display:block;background: transparent"
                         data-ad-client="ca-pub-6203353120448278"
                         data-ad-slot="1998794736"
                         data-ad-format="auto"></ins>
                    <script>
                    (adsbygoogle = window.adsbygoogle || []).push({});
                    </script>

             </center>
        </form>

UPDATE

Se eu clico no Enviar sem preencher nada, a página marca os campos, por causa do required e aparece a barra cheia, no Firefox. Mas se eu coloco para upar um arquivo essa mesma barra não se move:

inserir a descrição da imagem aqui

4
  • Algum erro no console no Safari?
    – BrTkCa
    Commented 22/11/2016 às 16:09
  • Não, nem no firebug.
    – Diego
    Commented 22/11/2016 às 16:21
  • @GuilhermeNascimento coloquei o form, obrigado!
    – Diego
    Commented 23/11/2016 às 16:54
  • Ok @GuilhermeNascimento, vou aguardar sua edição. Adicionei um comentario na sua resposta tambem. Obrigado pela ajuda
    – Diego
    Commented 23/11/2016 às 16:57

2 Respostas 2

1

O required não vai impedir de disparar a função upload dependendo da maneira que você escreveu o script, o upload irá processar mesmo que vazio, isto é porque o progresso de upload não é do teu arquivo, mas é do envio de qualquer coisa atravez da requisição.

No caso você fez isto:

<input type = "submit" id="salvar" name="salvar" onclick="javascript:upload();" value = "ENVIAR!" class="btn">

O onclick não consegue detectar o required, pois onclick detecta clicks e não disparos de forms. Para isto remove ele.

O conteúdo de arquivos por upload são enviados via multi-part, então mesmo que não envie o arquivo ainda sim a requisição é enviada, para evitar que dispare o evento você pode simplesmente usar preventDefault dentro de onsubmit, algo como (versão resumida):

<form id="cadastro" name="cadastro" enctype="multipart/form-data" method="POST" action="SalvarArquivo.php">

<input type="file" id="arquivo" name="arquivo" required>

<br>Andamento:<br><progress id="progressbar" value="0" max="100"></progress><br>
<input type="submit" id="salvar" name="salvar" value="ENVIAR!" class="btn">

</form>

E o javascript ficará assim (este script deve ir dentro de window.onload ou $.ready, exemplo usei $.ready mesmo):

$.ready(function() {
    document.getElementById("cadastro").addEventListener("submit", function (event)
    {
        event.preventDefault(); //Isto irá evitar o disparo prévio

        document.getElementById("cadastro").disabled = true;
        document.getElementById("salvar").disabled = true;

        //Se ocorrer algum erro de segurança ou qualquer outra coisa evita redirecionar
        setTimeout(upload, 1);

        return false;
    });
});

E dentro de upload faça isto:

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

  request.onreadystatechange = function()
  {
      if (request.readyState == 4) {
        document.getElementById("cadastro").disabled = false;
        document.getElementById("salvar").disabled = false;
      }
  };

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

Não tenho um Mac com Safari para testar, mas acredito que da maneira que descrevi funciona para todos browsers.

8
  • Na real o que ocorre, tanto no Safari como nos outros browsers, fora o Opera, é que a barra de progresso não anda. Mas o arquivo é enviado normalmente, dispara os emails e grava no servidor sem problemas. É só a perfumaria do progresso que o pessoal está reclamando...
    – Diego
    Commented 23/11/2016 às 16:56
  • sua resposta resolveu o problema de a barra carregar sem arquivo nenhum, mas continuo com o problema da barra não carregar a informação durante o upload do arquivo, ela fica parada....
    – Diego
    Commented 23/11/2016 às 17:03
  • alterei mas agora parou até no Opera....hehehe abri o DNS para acesso externo, veja: 200.208.251.153/ptransfer
    – Diego
    Commented 23/11/2016 às 17:09
  • Desculpe, já adicionei. Ele está dando um erro no firebug, estou verificando o que é. Obrigado por enquanto.
    – Diego
    Commented 23/11/2016 às 17:30
  • Sim, pode testar.
    – Diego
    Commented 23/11/2016 às 17:31
0

Use a biblioteca jQuery File Upload. Eles têm um tutorial bem bacana de como usar o básico, mas aqui vai o meu exemplo prático:

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>jQuery File Upload Example</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    </head>
    <body>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="jquery.ui.widget.js"></script>
    <script src="jquery.iframe-transport.js"></script>
    <script src="jquery.fileupload.js"></script>
    <script>
$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        add: function (e, data) {
            $('#progressbar').css('display', 'block');
            $('#progressbar_span').html('');
            data.context = $("<span id='progressbar_span' class='label label-info'></span>").text('Carregando...').appendTo("#modal_gerenciar_arquivo_header");
            data.submit();
        },
        progressall: function (e, data) {
            $('#progressbar_msg').hide();
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#progressbar .progress-bar').css(
                'width',
                progress + '%'
            );
        },
        done: function (e, data) {
            $('#progressbar_msg').show();
            $.each(data.result.files, function (index, file) {
                if(file.error != null){
                    $('#progressbar_msg').html('');
                    $('#progressbar_msg').html(
                        "<div class='alert alert-danger'>"+file.error+"</div>"
                    );
                } else {
                    $('#progressbar_msg').html('');
                }
            });
            $('#progressbar').css('display', 'none');
            data.context.text('Carregamento finalizado!');
        }
    });
});
</script>
<div class="progress" id="progressbar" style="display: none">
    <div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:0%;">
        <span class="sr-only"></span>
    </div>
</div>
<p id="progressbar_msg"></p>
<input id="fileupload" type="file" name="files[]" data-url="script_de_upload.php">
</body> 
</html>

Eu uso Bootstrap, mas vc pode usar outro framework CSS qualquer.

3
  • Obrigado pela resposta, mas não consegui ainda fazer funcionar. Vou tentar mais um pouco resolver o meu script e se não der vou tentar usar essa biblioteca.
    – Diego
    Commented 22/11/2016 às 16:57
  • 1
    É uma boa resposta, mas mudar para jQuery não resolve o problema de entendimento de como funciona a API pura DOM ou do XMLHttpRequest, ou seja a resposta pode ser util para quem usa jQuery, mas para quem quer estudar o comportamento ou usa outros frameworks não resolve.
    – Syzoth
    Commented 23/11/2016 às 16:14
  • Justo. Achei que a intenção era resolver o problema. Me pareceu que ele tem esse sistema em produção, e horas preciosas se vão na tentativa de desenvolver manualmente coisas que já são estabilizadas em bibliotecas e frameworks. ;) Commented 23/11/2016 às 20:12

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .