Pré visualização de uma imagem antes de enviar.

[Douglas Fiedler]

Devido a questões de segurança, se eu tentar pegar o value de um input file o navegador me retorna um fakepath ou só o nome do arquivo.

No IE encontrei um tutorial que ensina como desativar isso.

No Chrome ainda não achei e...

... no Firefox ainda não procurei.

A minha situação é simples, tem um formulário com dois input file, gostaria de pegar o value deles (caminho das imagem) e atribuir ao src de duas imagens já presentes na página, gerando assim um preview antes do usuário realmente upá-las para o site.

O que me aconselham? Desde já agradeço qqr dica.

Por hora meu código está assim:

arquivo.js

$(document).ready(function () {

    $("input:file").change(function () {

        var imgDefault = "default.jpg";

        var imgSel = $(this).val();

        $("#preView1").attr("src",imgSel);

    });

});

html.html

<form id="CadastroProdutos" name="CadastroProdutos" action="cad.php" enctype="multipart/form-data" method="post">

  <div id="lbForm">

      <div>

          <img id="preView1" class="preView" src="default.jpg" />

          <img id="preView2" class="preView" src="default.jpg" />

      </div>

      <div>

          <h1></h1>

          <span></span>

          <h2>Categoria:</h2>

          <span></span>

          <h2>Tamanho:</h2>

          <span></span>

          <h2>Cor:</h2>

          <span></span>

          <h2>Descrição</h2>

          <span></span>

          <h2>Preço:</h2>

          <span></span>

      </div>

  </div>

    <h3>Imagem Frente:</h3>

    <input type="file" name="imgfrente" size="6" />

    

    <h3>Imagem Verso:</h3>

    <input type="file" name="imgverso" size="6" />

</form>

--
www.dognew.com.br

[Neto Neto]

Você pode usar um recurso no HTML5 chamado blob url, que lhe retorna uma url "temporária" do arquivo ( https://developer.mozilla.org/en-US/docs/DOM/window.URL.createObjectURL )

Segue o suporte ao recurso: http://caniuse.com/bloburls

Neto - Web developer
+55 81-9916.1778

2013/3/22 Douglas Fiedler <dog...@gmail.com>

--
--
Grupo de jQuery Brasil.
 
REGRAS: https://docs.google.com/document/d/1VfvTDmeHTSj-L5ouZJjQQ4OkjTCU1Hr2XtPYBNGVHH4/edit
 
USE O JSBIN.COM / JSFIDDLE.NET PARA CÓDIGOS.
 
Email: jque...@googlegroups.com
Biba: jquery-br+...@googlegroups.com
Site: http://groups.google.com/group/jquery-br?hl=pt-BR
 
---
Você está recebendo esta mensagem porque se inscreveu no grupo "jQuery (Brasil)" dos Grupos do Google.
Para cancelar a inscrição neste grupo e parar de receber seus e-mails, envie um e-mail para jquery-br+...@googlegroups.com.
Para obter mais opções, acesse https://groups.google.com/groups/opt_out.
 
 

[Everton Pereira]

Pegar um arquivo no lado do cliente com javascript?

Pode, Arnaldo?

[Neto Neto]

Pode sim.

Como acha que o facebook já mostra o thumb da foto antes mesmo de ela ir para o server durante o upload de um novo álbum?

Neto - Web developer
+55 81-9916.1778

2013/3/22 Everton Pereira <coffe...@gmail.com>

[Everton Pereira]

Ele não faz o upload da imagem, processa, gera o thumb e exibe?

[Douglas Fiedler]

Sou meio leigo então não reparem nas engrenagens enferrujadas. rs.

Achei fantástico! Se encaixaria bem no meu caso. Principalmente neste trecho:

Example: Showing thumbnails of user-selected images

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);

  }

}







Mas só um esclarecimento, isso é um implemento do navegador/linguagem ou é biblioteca que terei que inserir na página como faço com a biblioteca jQuery?

Por favor. Paciência que o cérebro só funciona no tranco. rs.

Tipo... como eu aplicaria esse código acima no meu caso e em jQuery? (Tô pedindo demais, né? Se for é só falar, não tenho preguiça de pensar.... rs.)

[Luiz Henrique A. da Silva]

O ideal para esse tipo de caso é fazer o upload da imagem via AJAX e exibi-la. Esse tipo de solução apenas browser dá 1 dor de cabeça gigantesca e não funciona cross-browser.

E o facebook faz o upload da imagem quando a exibe no upload, sim. Vc pode até abri-la com o botão direito e ver que tem uma URL estática.

--

[Neto Neto]

@Everton, essa API leh retorna uma "url" local do arquivo. É como se você conseguisse acessar os arquivos do do computador no usuário (não é isso, mas a grosso modo é sim).

Veja este exemplo: http://vagnersantana.com/player.io/

Clique em "escolher arquivos", e suba um arquivo de áudio. O propósito deste demo é outro, mas dá para ver o que a API faz. O cara consegue reproduzir o arquivo de áudio sem fazer upload.

Neto - Web developer
+55 81-9916.1778

2013/3/22 Douglas Fiedler <dog...@gmail.com>

Sou meio leigo então não reparem nas engrenagens enferrujadas. rs.

--

[Neto Neto]

@Luiz eu falo durante o progresso, quando os thumbs estão em fila ainda, e não subiram. Acha que o facebook vai subir as imagens para mostrar os thumbs, e depois vai "subir de novo de verdade"?

Neto - Web developer
+55 81-9916.1778

2013/3/22 Luiz Henrique A. da Silva <luiz...@gmail.com>

[Rafael Sirotheau]

Achei isto aqui na internet:

http://jsbin.com/uboqu3/1/edit

Rafael Sirotheau
@rafasirotheau
/rafasirotheau

Front-end Web Developer
[53] 8122 5166

[Luiz Henrique A. da Silva]

O Facebook faz o upload antes de exibir na lista.

Faz um teste aí que você vai ver.

Esse tipo de "efeito" só existe nas versões mais recentes do Webkit e Gecko.

[Neto Neto]

Interessante, ele cria um base64 da imagem. Bem bolado.

@Luiz, não tenho acesso ao facebok daqui.

Mas cara, não faz sentido, o upload em progresso, e já existir o thumb da imagem na lista de upload. Mas é isso mesmo?

[Luiz Henrique A. da Silva]

O Facebook exibe uma barra de progresso, e depois que é enviado a imagem, ela é exibida no lugar da barra de progresso, em forma de thumb.

[Douglas Fiedler]

Pessoal,

Testei o código deste link: http://jsbin.com/uboqu3/1/edit

E ele funcionou direitinho. Só apanhei um pouquinho pois estava colocando ele dentro do meu script jQuery e portanto não funcionava.

Ele não faz o upload da imagem e carregou perfeitamente no Chrome e Firefox, sendo OS Debian. Irei testar agora no Windows e navegadores.

Já, já me entendo com o blob url.

[Everton Pereira]

Adivinha em qual navegador não funcionou?

--

[Douglas Fiedler]

No Safari. kkkkkk

[Rafael Sirotheau]

Achei este codigo aqui:

http://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded

Lá tem uma discussão sobre como fazer funcionar no IE.

Em 22 de março de 2013 18:25, Douglas Fiedler <dog...@gmail.com> escreveu:

No Safari. kkkkkk

--
--
Grupo de jQuery Brasil.
 
REGRAS: https://docs.google.com/document/d/1VfvTDmeHTSj-L5ouZJjQQ4OkjTCU1Hr2XtPYBNGVHH4/edit
 
USE O JSBIN.COM / JSFIDDLE.NET PARA CÓDIGOS.
 
Email: jque...@googlegroups.com
Biba: jquery-br+...@googlegroups.com
Site: http://groups.google.com/group/jquery-br?hl=pt-BR
 
---
Você está recebendo esta mensagem porque se inscreveu no grupo "jQuery (Brasil)" dos Grupos do Google.
Para cancelar a inscrição neste grupo e parar de receber seus e-mails, envie um e-mail para jquery-br+...@googlegroups.com.
Para obter mais opções, acesse https://groups.google.com/groups/opt_out.
 
 

[Marlon Pacheco]

Seria isso ??

http://wp.me/p2QHH5-29

[Neto Neto]

Não, não seria isso.

Neto - Web developer
+55 81-9916.1778

2013/3/25 Marlon Pacheco <marlo...@gmail.com>

--

[Douglas Fiedler]

Em 25 de março de 2013 09:05, Marlon Pacheco <marlo...@gmail.com> escreveu:

Seria isso ??

http://wp.me/p2QHH5-29

Não e sim, Marlon. Esse é bem bacana mas inclui muito mais fatores e é bem extenso.

O código que resolveu meu problema foi o exemplificado neste link: http://jsbin.com/uboqu3/1/edit

Por falta de tempo não pude ainda ver melhor o blur (solução do Neto).

Estou com outro problema agora, mas criarei um novo tópico. Assim não trunca este com outros assuntos.

Este está resolvido por hora!

[Francisco Nascimento]

Eu ia ate responder... mas ja resolveu ...rsrsrs mas fica a dica ... o bootstrap tem uma classe  que faz isso e remove a mesma se vc quiser trocar a imagen segue o link:: http://jasny.github.com/bootstrap/javascript.html#fileupload tem umas tres formas de fazer isso.... da uma olhada

--

[Douglas Fiedler]

Fantástico, Francisco! Achei muito bom. Irei olhar sim.

[analista.carlosh]

galerinha, precisava de exatamente desse preview, valew muito obrigado vcs me ajudaram muito!