Jquery - Preview imagem

Helio13 · August 12, 2013 at 02:44 PM

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?

taviroquai · August 13, 2013 at 12:34 AM

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...

Helio13 · August 13, 2013 at 08:47 AM

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?

Jhones · March 19, 2015 at 12:58 PM

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

Sign In

Jquery - Preview imagem

Recommended Posts

Helio13

taviroquai

Helio13

Jhones

Create an account or sign in to comment

Create an account

Sign in

Home

Activity

Revista PROGRAMAR

Important Information