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: