Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

e3tadashi

[Resolvido] mostrar imagem do input file antes do request

Por , em PHP

Recommended Posts

e3tadashi    0

e3tadashi
Postado

Boa tarde pessoal!

 

Alguém sabe como faz pra exibir uma imagem no input file sem ter que fazer o request?

 

Tipo a pessoa seleciona a imagem no formulário, e eu queria que ela já fosse exibida antes de enviar.

 

Dá pra fazer isso?

 

Obrigado,

 

Abraço!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Oderdenge    42

Guilherme Oderdenge
Postado

É possível fazer com HTML 5. Com PHP, não dá — uma requisição será feita.

 

Você quer exibir uma pré-visualização desta imagem, não é mesmo? Se sim, utilize a técnica do iframe oculto. Ele enviará a imagem para o servidor; depois, dinamicamente você recebe o endereço desta imagem e exibe para o usuário. Se ele for utilizar a imagem, beleza. Senão, você remove ela da pasta de imagens.

 

Algumas referências para você, sem HTML 5:

→ http://web4us.wordpress.com/2009/08/13/image-upload-preview-without-page-refresh/

→ http://dondedeportes.es/uploader-previewer/

 

Agora, com HTML 5:

→ https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications#Example.3a.c2.a0Showing_thumbnails_of_user-selected_images

 

Bons estudos! :thumbsup:

Compartilhar este post

Link para o post
Compartilhar em outros sites

e3tadashi    0

e3tadashi
Postado

Esse treco ta meio avançado pra mim, tá meio difícil isso =/.

 

O script original do link que você me passou era assim:

 

function handleFiles(files) {
 for (var i = 0; i < files.length; i++) {
   var file = files[i];
   var imageType = /image.*/;

   if (!file.type.match(imageType)) {
     continue;
   }

   var img = document.createElement("img");
   img.classList.add("obj");
   img.file = file;
   preview.appendChild(img);

   var reader = new FileReader();
   reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
   reader.readAsDataURL(file);
 }
}

 

Eu queria operar com apenas uma imagem, e não entendi a parte que ele verifica as extensões. Tipo o que eu ponho no lugar daquele /image.*/?

 

Tentei fazer algo assim, não me preocupando com as extensões:

 

<script language="javascript" type="text/javascript">
function handleFiles(files) {

   var file = files[0];
   var imageType = /image.*/;


	var img = document.createElement("img");
	img.classList.add("mini_foto");
	img.file = file;
	preview.appendChild(img);

	var reader = new FileReader();
	reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
	reader.readAsDataURL(file);


}
</script>

<html>
<input type="file" id="image" name="image" onchange="handleFiles(this.files);" />
</html>

 

Não manjo muito de JS então to meio perdido no que estou fazendo... Tipo a função vai criar a <img /> quando eu seleciono uma imagem no input, mas onde ela vai parar?

 

TENSO... rsrs

Compartilhar este post

Link para o post
Compartilhar em outros sites

e3tadashi    0

e3tadashi
Postado

Aeeee!

 

Consegui uma parte de um jeito diferente (mais simples) =p hehe...

 

Mas ainda não entendi essa parte das extensões.

 

Alguém poderia me explicar como fazer a verificação das extensões do arquivo?

 

O que eu consegui até agora ficou assim:

 

<script language="javascript" type="text/javascript">
function readURL(input, id) {
           if (input.files && input.files[0]) {
               var reader = new FileReader();

               reader.onload = function (e) {
                   $('#'+id)
		.attr('src', e.target.result)
		;
               }

               reader.readAsDataURL(input.files[0]);
           }
       }
</script>

<html>
<img id="mini_foto_new" class="mini_foto" src="usuarios/default.jpg" />
<input type="file" id="image" name="image" onchange="readURL(this,'mini_foto_new');" />
</html>

 

Funcionou!

Alguém manja fazer a verificação de extensões e tamanho de arquivo?

 

Obrigado.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos PHP
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito