Barra de progresso em Upload de imagem, bug do Mozilla?
Opa beleza pessoal? É o seguinte criei uma aplicação javascript aqui, para upload de arquivos(imagens) que mostra uma previa da mesma antes de salvar.
Fiz o testes em alguns navegadores e em 3 não funcionou como esperado.
IE e Edge como era de se esperar por serem péssimos navegadores a coisa não funcionou.
Porém meu descontamento foi com o mozilla firefox (atualizado) cujo o monitoramento do progresso não funciona corretamente.
Assim sendo a medida que o navegador vai lendo o arquivo enviado ele alterar a largura em porcentagem de um elemento html que é a barra de progresso exibindo assim o status do envio. E ai que entra o problema, pois ás vezes no "mozilla" a barra fica entre 1 e 12% independente do tamanho de bits da imagem como se o monitoramento não chegasse ao final, já no chrome, opera e safari o monitoramento se completa.
Se quiserem dar uma olhada e testar para confirmar que é realmente um bug de um navegador específico ficaria grato. Ou mesmo se saber o que está causando essa anomalia.
Obs.: O intuito disso é que depois de criada e prévia vou fazer uma função para cortar e redimensionar o tamanho, pós então criar a função que irá enviar a imagem para o servidor ou mesmo salvar-la como base64 para gravar em banco de dados (ainda não decidir o que realmente vou fazer).
O javascript está bem genérico e simples pois ainda é um embrião do realmente vai ser.
Nota: Fiz o teste no mozilla enviando arquivos "que não são imagem com a função liberada para esses tipos de arquivos sem usar previa" o monitoramento funcionou corretamente como estimado, tipos de arquivo TXT, DOCX, videos, BIN, EXE etc... o problema só são imagens mesmo.
HTML + CSS
Spoiler
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="Upload.js" type="text/javascript"></script>
<title></title>
<style>
#dropbox {
height: 500px;
width: 100%;
border: 2px dotted #000000
}
#dropbox:hover {
background: gray
}
#progess-bar {
position: fixed;
top: 0;
left: 0;
height: 2px;
width: 0;
background: #ff0000;
border-top: 1px solid #800000;
border-bottom: 1px solid #800000
}
#preview {
max-width: 100%;
overflow-x: scroll
}
.img-prev {
height: 240px
}
</style>
</head>
<body>
<div id="progess-bar"></div>
<div id="preview"></div>
<div id="dropbox"></div>
<script>var up = new Upload();</script>
</body>
</html>
Javascript
Spoiler
var Upload = function () {
var $dropField = document.getElementById('dropbox');
var $progressBar = document.getElementById('progess-bar');
var $transfer, $file, $reader, $image;
$upProgress = 0;
// remover o comportamento padrão do navegador dentro da box de envio
function stopEvent(event) {
event.stopPropagation();
event.preventDefault();
}
// obter o arquivo
function getFile(event) {
event.stopPropagation();
event.preventDefault();
$transfer = event.dataTransfer.files;
checkFile($transfer);
}
// Checar o tipo de arquivo e criar o cabeçalho
function checkFile(files) {
$upProgress = 0;
$progressBar.style.width = 0;
$reader = new FileReader();
$reader.addEventListener('progress', progress, true);
$file = files[0]; // Se for mais de 1 arquivo só seleciona o primeiro
if (/\.(jpe?g|png|gif)$/i.test($file.name)) {
createPrev($file);
}
}
// criar uma imagem igual a enviada
function createPrev(file) {
var preview = document.getElementById('preview');
$image = document.createElement('img');
$image.classList.add('img-prev');
$image.file = file;
preview.appendChild($image);
$reader.addEventListener('load', loadPreview, true);
$reader.readAsDataURL(file);
}
// exibir a imagem enviada
function loadPreview(event) {
$image.src = event.target.result;
setTimeout(function () {
$upProgress = 0;
$progressBar.style.width = 0;
}, 500);
}
// barra de progresso
function progress(event) {
if (event.lengthComputable) {
$upProgress = Math.round((event.loaded / event.total) * 100);
$progressBar.style.width = $upProgress + '%';
}
}
// Adicionar os eventos drap & drop no box de envio
$dropField.addEventListener('dragenter', stopEvent, false);
$dropField.addEventListener('dragover', stopEvent, false);
$dropField.addEventListener('drop', getFile, false);
};Discussão (0)
Carregando comentários...