Administração de Loja

[Enziguri]

Boa noite,

Estou a fazer uma loja em php, acontece que estou na parte do formulario para inserir, remover e alterar os produtos... O que eu pretendia era fazer um formulario com uma "pre-visualização" do lado direito, aqui vai um screenshot do que pretendo.

Quero que esta pre-visualização seja feita em tempo real... ou seja, em javascript, jquery, etc.

Alguém sabe como o posso fazer?

Obrigado

https://dl.dropbox.com/u/12085850/Untitled-1%20copy.JPG

[NunoDinis]

acontece que estou na parte do formulario para inserir, remover e alterar os produtos... O que eu pretendia era fazer um formulario com uma "pre-visualização" do lado direito

Queres inserir uma foto do produto que vais inserir ? Não percebi bem que imagem queres mostrar.

Mas sim, podemos-te ajudar. Se for o que estou a pensar é facilmente feito só com PHP puro

[Enziguri]

Queres inserir uma foto do produto que vais inserir ? Não percebi bem que imagem queres mostrar.

Mas sim, podemos-te ajudar. Se for o que estou a pensar é facilmente feito só com PHP puro

é so uma espécie de rascunho ainda... o que pretendo é previzualizar o que estou a inserir, para evitar certos erros simples, o campo da imagem será substituido por um campo para fazer upload de imagem...

Ou seja, tenho esses 4 campos e pretendo adicionar do lado direito o que esses campos contêm...

a parte do lado direito é como vai aparecer na loja... e quero visualizar isso antes de enviar para a DB

Edited December 14, 2012 at 11:28 PM by Enziguri

[NunoDinis]

Ou seja, tenho esses 4 campos e pretendo adicionar do lado direito o que esses campos contêm...

Hum.. deixa-me ver se percebi. À medida que digitas do "lado esquerdo", queres que vá aparecendo no "painel da direita"?

[Enziguri]

Hum.. deixa-me ver se percebi. À medida que digitas do "lado esquerdo", queres que vá aparecendo no "painel da direita"?

sim, o ideal era mesmo em jquery, para que actualiza-se em "tempo real" e nao ter que fazer um refresh para aparecer...

[HappyHippyHippo]

Quero que esta pre-visualização seja feita em tempo real... ou seja, em javascript, jquery, etc.

Se for o que estou a pensar é facilmente feito só com PHP puro

com essa fiquei abananado ...

sim, o ideal era mesmo em jquery, para que actualiza-se em "tempo real" e nao ter que fazer um refresh para aparecer...

fazer isso "on-the-fly", é algo muito simples, basta registar uma função ao método onchange e actualizares o que pretendes

o campo da imagem será substituido por um campo para fazer upload de imagem...

já que é para fazer pipi, porque não isto :

$(document).ready(function() {
   $("#prodimg").change(function(e) {
       for (var i = 0; i < e.originalEvent.srcElement.files.length; i++) {
           var file = e.originalEvent.srcElement.files[i];

           var reader = new FileReader();
           reader.onloadend = function() {
               $("#preview").attr("src", reader.result);
           }
           reader.readAsDataURL(file);
       }
   });
});

experimenta e verás (nota que não deverá funcionar no Safari e/ou no IE

[pikax]

Se for o que estou a pensar é facilmente feito só com PHP puro

Acho que ele quer como o happyhippyhippo falou que e' on fly, enquanto ele esta' a editar ou a adicionar, ele ja dar uma previsualizacao de como ira' ficar, fazer isso com php pura, tinhas que fazer refresh 'a pagina.

[Enziguri]

humm, obrigado pelas respostas, @HappyHippyHippo, consegues explicar melhor esse javascript?

[HappyHippyHippo]

consigo, mas preferia que tu testasses primeiro para ver o efeito ...

[NunoDinis]

Acho que ele quer como o happyhippyhippo falou que e' on fly, enquanto ele esta' a editar ou a adicionar, ele ja dar uma previsualizacao de como ira' ficar, fazer isso com php pura, tinhas que fazer refresh 'a pagina.

Eu sei. Numa primeira-fase percebi que ele queria era carregar as fotos.. E isso faz-se bem com php.

Mas depois percebi o que ele realmente queria.

Hum.. deixa-me ver se percebi. À medida que digitas do "lado esquerdo", queres que vá aparecendo no "painel da direita"?

[Enziguri]

com essa fiquei abananado ...

fazer isso "on-the-fly", é algo muito simples, basta registar uma função ao método onchange e actualizares o que pretendes

já que é para fazer pipi, porque não isto :

$(document).ready(function() {
$("#prodimg").change(function(e) {
	for (var i = 0; i < e.originalEvent.srcElement.files.length; i++) {
		var file = e.originalEvent.srcElement.files[i];

		var reader = new FileReader();
		reader.onloadend = function() {
			$("#preview").attr("src", reader.result);
		}
		reader.readAsDataURL(file);
	}
});
});

experimenta e verás (nota que não deverá funcionar no Safari e/ou no IE

Bem, não estou a conseguir por isto em pratica... sou um 0 em javascript -.-

[HappyHippyHippo]

epa ... não consegues fazer copy-paste ??? só necessitar de alterar/criar dois elementos :

- um elemento input com um id prodimg

- uma imagem sem src com o id preview

<!DOCTYPE html>
<html>
 <head>
   <meta id="test" http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
   <script type="text/javascript">
   $(document).ready(function() {
       $("#prodimg").change(function(e) {
               for (var i = 0; i < e.originalEvent.srcElement.files.length; i++) {
                       var file = e.originalEvent.srcElement.files[i];

                       var reader = new FileReader();
                       reader.onloadend = function() {
                               $("#preview").attr("src", reader.result);
                       }
                       reader.readAsDataURL(file);
               }
       });
   });
   </script>
 </head>
 <body>
   <input type="file" id="prodimg" name="img" />
   <img id="preview" />
 </body>
</html>

Edited December 15, 2012 at 01:47 PM by HappyHippyHippo

[jfosorio]

Happy, o javascript tá muito porreiro, mas não lhe vai resolver os problemas todos. Se ele quiser validar os dados server-side, como é que vais manter o valor do input do tipo file?

A resolução deste problema parece-me ser bem mais complexa do que isso...

[HappyHippyHippo]

Happy, o javascript tá muito porreiro, mas não lhe vai resolver os problemas todos. Se ele quiser validar os dados server-side, como é que vais manter o valor do input do tipo file?

A resolução deste problema parece-me ser bem mais complexa do que isso...

o pedido foi :

Quero que esta pre-visualização seja feita em tempo real... ou seja, em javascript, jquery, etc.

o que é que o "rabinho" tem haver com as calças ???

[jfosorio]

o que é que o "rabinho" tem haver com as calças ???

Tens a pré-visulaização, submetes o formulário, é detetado um erro e puff! Pré-visualização pó galheiro -> é isso que o "rabinho" tem a ver com as calças.

Mas tá-se, fica lá com a bicicleta.

[HappyHippyHippo]

Tens a pré-visulaização, submetes o formulário, é detetado um erro e puff! Pré-visualização pó galheiro -> é isso que o "rabinho" tem a ver com as calças.

Mas tá-se, fica lá com a bicicleta.

epa ... vai aprender ...

[mjamado]

Olha, um uso prático para a File API de que ainda não me tinha lembrado. Boa malha...

nota que não deverá funcionar no Safari e/ou no IE

Penso que o IE10 e o Safari 6 já suportam, mas não tenho a certeza...

Edited December 16, 2012 at 01:08 AM by mjamado

[Enziguri]

Peço desculpas não ter respondido, o meu computador queimou -.-

Continuo sem conseguir por a pre-visualização da imagem a funcionar em todos os browsers... precisava que pelo menos funcionasse em firefox/IE/chrome...

Entretanto surgiu-me um problema ao fazer upload da foto. Como o formulario em questão serve para inserir produtos a uma loja, ao fazer upload a 2 produtos com uma imagem com o mesmo nome deverá faze-lo para uma pasta, mas, o nome não se pode repetir, e, terei que adicionar esse url na base de dados... Como o posso fazer?

Obrigado

[HappyHippyHippo]

crias um hash e gravas o ficheiro na pasta em que o nome passa a ser esse hash.

se queres "recuperar" o nome, necessitas de o gravar no base de dados e para fazer download, crias um script que faça o download do ficheiro onde indicas qual o nome verdadeiro/original do ficheiro a ser descarregado

[Enziguri]

crias um hash e gravas o ficheiro na pasta em que o nome passa a ser esse hash.

se queres "recuperar" o nome, necessitas de o gravar no base de dados e para fazer download, crias um script que faça o download do ficheiro onde indicas qual o nome verdadeiro/original do ficheiro a ser descarregado

o ideal é apenas alterar o nome no upload... nao precisa de ser um nome "especial", qualquer coisa serve, "juaisgdfjasdbvfi.jpg" serve perfeitamente... conheces algum script bom que faça algo assim do genero?

Obrigado