Ir para o conteúdo
  • Revista PROGRAMAR: Já está disponível a edição #60 da revista programar. Faz já o download aqui!

Enziguri

Administração de Loja

Mensagens Recomendadas

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

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
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


Estranha forma de vida que tem a capacidade de transformar comandos em mensagens de erro.

ndsotware.org

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
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

Editado por Enziguri

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
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"?


Estranha forma de vida que tem a capacidade de transformar comandos em mensagens de erro.

ndsotware.org

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
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...

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
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

  • Voto 1

IRC : sim, é algo que ainda existe >> #p@p

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
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.


Por muito mais que que estude só aprendo uma coisa, que ainda tenho muita coisa para aprender.

A beleza de um código está em decompor problemas complexos em pequenos blocos simples.

"learn how to do it manually first, then use the wizzy tool to save time."

"Kill the baby, don't be afraid of starting all over again. Fail soon, learn fast."

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
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"?

Estranha forma de vida que tem a capacidade de transformar comandos em mensagens de erro.

ndsotware.org

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
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 -.-

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
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>

Editado por HappyHippyHippo

IRC : sim, é algo que ainda existe >> #p@p

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
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...


CSS 3D Text - Partilha mensagens em 3D com os teus amigos no Facebook!

Portal de Informática it4life - Emprego, notícias, fórum, comunidade.

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
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 ???


IRC : sim, é algo que ainda existe >> #p@p

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
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.


CSS 3D Text - Partilha mensagens em 3D com os teus amigos no Facebook!

Portal de Informática it4life - Emprego, notícias, fórum, comunidade.

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
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 ...


IRC : sim, é algo que ainda existe >> #p@p

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
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...

Editado por mjamado

"Para desenhar um website, não tenho que saber distinguir server-side de client-side" - um membro do fórum que se auto-intitula webdesigner. Temo pelo futuro da web.

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
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

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
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


IRC : sim, é algo que ainda existe >> #p@p

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
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

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
Enziguri

Obrigado yoda, surgiu-me um grande problema... estou a usar um subdominio para fazer a gestao desta loja, e estou com problemas a tentar fazer upload da imagem para o dominio principal... alguém sabe como o fazer?

Obrigado

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
Enziguri

Humm, não estou mesmo a conseguir fazer upload da imagem, alguem me consegue arranjar um script que faça upload e renomeie para um nome unico? para evitar duplicar ou algo do genero...

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!

Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.

Entrar Agora

×

Aviso Sobre Cookies

Ao usar este site você aceita os nossos Termos de Uso e Política de Privacidade. Este site usa cookies para disponibilizar funcionalidades personalizadas. Para mais informações visite esta página.