Jump to content
Helio13

Jquery - Preview imagem

Recommended Posts

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?

Share this post


Link to post
Share on other 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...

Share this post


Link to post
Share on other 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?

Share this post


Link to post
Share on other 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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.