Jquery - Preview imagem

555 views
Skip to first unread message

Hélio Miranda

unread,
Aug 12, 2013, 1:31:20 PM8/12/13
to js...@googlegroups.com
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
Código (HTML):
<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:
Código (HTML):
<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? 

Michael Humberto Castillo Granados

unread,
Aug 12, 2013, 1:40:00 PM8/12/13
to js...@googlegroups.com
Já pensou em criar outro elemento de imagem ao invés de usar sempre o mesmo?

Crie uma div que englobará suas imagens, imagino id="images".

var img = document.createElement('img');
img.src = e.target.result;
document.getElementById("images").appendChild(img);





2013/8/12 Hélio Miranda <heli...@gmail.com>

--
You received this message because you are subscribed to the Google Groups "js.pro" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jspro+un...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

Hélio Miranda

unread,
Aug 12, 2013, 2:28:16 PM8/12/13
to js...@googlegroups.com
Como assim? 
Podes me ajudar com o codigo que disponibilizei?

Rafael Bernard Rodrigues Araujo

unread,
Aug 12, 2013, 2:29:55 PM8/12/13
to js...@googlegroups.com

--
Rafael Bernard Rodrigues Araújo - Analista de Tecnologia
http://about.me/rafaelbernard | Hospedagem de sites - http://oservidor.com


On Mon, Aug 12, 2013 at 3:28 PM, Hélio Miranda <heli...@gmail.com> wrote:
Como assim? 
Podes me ajudar com o codigo que disponibilizei?

--

Michael Humberto Castillo Granados

unread,
Aug 12, 2013, 3:03:23 PM8/12/13
to js...@googlegroups.com
Veja este exemplo, baseado no que você enviou:

Hélio Miranda

unread,
Aug 13, 2013, 4:57:58 AM8/13/13
to js...@googlegroups.com
Obrigado pela ajuda.

Apenas mais uma coisa, queria que as imagens 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...

Alguém sabe como consigo fazer isso?

Michael Humberto Castillo Granados

unread,
Aug 14, 2013, 9:17:01 AM8/14/13
to js...@googlegroups.com
Experimente assim: http://jsfiddle.net/dgmike/7LGdb/2/

Precisei adicionar a jQuery para que o código fique mais simples para você dar manutenção :)



2013/8/13 Hélio Miranda <heli...@gmail.com>
Obrigado pela ajuda.

Apenas mais uma coisa, queria que as imagens 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...

Alguém sabe como consigo fazer isso?

--

Hélio Miranda

unread,
Aug 19, 2013, 5:40:28 AM8/19/13
to js...@googlegroups.com
Obrigado era isso mesmo que queria ;)

Cumprimentos
Hélio Miranda
Reply all
Reply to author
Forward
0 new messages