Ir para o conteúdo
  • Revista PROGRAMAR: Já está disponível a edição #60 da revista programar. Faz já o download aqui!

Helio13

Jquery - Preview imagem

Mensagens Recomendadas

Helio13

Oi.

Eu antes de fazer o upload das imagens queria carregar um preview com as imagens para depois inserir a legenda da cada uma.

Então estive a tentar assim, e tudo ok para apenas uma foto

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
function preview(input) {
if (input.files && input.files[0]) {
	var reader = new FileReader();

	reader.onload = function (e) {
		$('#preview_image')
.attr('src', e.target.result)
			.width(100)
			.height(120);
	};
	reader.readAsDataURL(input.files[0]);
}
}
</script>
<meta charset=utf-8 />
<title>jQuery file upload</title>
</head>
<body>
<img id="preview_image" alt="" src="" width="100px" height="120px"> <br>
<input type="file" name="files" id="files" onchange="preview(this);" multiple>
</body>
</html>

Mas eu queria fazer agora para várias fotos e não estou a conseguir, estava a tentar algo assim:

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
function preview(input) {
for(i=0; i<this.files.length; i++){
var reader = new FileReader();

	reader.onload = function (e) {
		$('#preview_image')
.attr('src', e.target.result)
			.width(100)
			.height(120);
	};
 reader.readAsDataURL(input.files[i]);
}
}

</script>
<meta charset=utf-8 />
<title>jQuery file upload</title>
</head>
<body>
<img id="preview_image" alt="" src="" width="100px" height="120px"> <br>
<input type="file" name="files" id="files" onchange="preview(this);" multiple>
</body>
</html>

Alguém me pode ajudar?

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
taviroquai

Precisas e ter 1 elemento preview para cada imagem (só tens 1) e experimenta colocar a leitura a proxima imagem no callback onload do filereader... senão experimenta criar 1 file reader para cada imagem...

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
Helio13

Bem, consegui fazendo assim:

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
function preview(input) {
   for (i = 0; i < input.files.length; i++) {
    var reader = new FileReader();
    reader.onload = function (e) {
	    if (!document.getElementById('images').getElementsByTagName('img').length) {
		    document.getElementById('images').innerHTML = '';
	    }
	    var img = document.createElement('img');
	    img.src = e.target.result;
	    img.style.width = '100px';
	    img.style.height = '100px';
	    document.getElementById('images').appendChild(img);
    };
    reader.readAsDataURL(input.files[i]);
   }
}
</script>
<meta charset=utf-8 />
<title>jQuery file upload</title>
</head>
<body>
<div id="images">Choose some files first</div><br>
<input type="file" name="files" id="files" onchange="preview(this);" multiple>
</body>
</html>

Mas as imagens ficam lado a lado, eu queria que elas ficassem uma por baixo da outra e com um campo para inserir uma legenda por baixo de cada imagem, mas não estou a conseguir fazer isso...

Alguém me pode ajudar?

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
Jhones

Bem voce dar um creat elemente br

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
function preview(input) {
   for (i = 0; i < input.files.length; i++) {
	    var reader = new FileReader();
	    reader.onload = function (e) {
			    if (!document.getElementById('images').getElementsByTagName('img').length) {
					    document.getElementById('images').innerHTML = '';
			    }
			    var img = document.createElement('img');
			    var br = document.createElement('br');
			    img.src = e.target.result;
			    img.style.width = '100px';
			    img.style.height = '100px';
			  document.getElementById('images').appendChild(img);
			  document.getElementById('images').appendChild(br);
	    };
	    reader.readAsDataURL(input.files[i]);
  }
}
</script>
<meta charset=utf-8 />
<title>jQuery file upload</title>
</head>
<body>
<div id="images">Choose some files first</div><br>
<input type="file" name="files" id="files" onchange="preview(this);" multiple>
</body>
</html>

so registrei conta pra da essa dica

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!

Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.

Entrar Agora

×

Aviso Sobre Cookies

Ao usar este site você aceita os nossos Termos de Uso e Política de Privacidade. Este site usa cookies para disponibilizar funcionalidades personalizadas. Para mais informações visite esta página.