Jump to content
Enziguri

Administração de Loja

Recommended Posts

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

Share this post


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

Share this post


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

Edited by Enziguri

Share this post


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

Share this post


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

Share this post


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

  • Vote 1

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

Share this post


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

Share this post


Link to post
Share on other sites
Enziguri

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

Share this post


Link to post
Share on other sites
HappyHippyHippo

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


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

Share this post


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

Share this post


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

Share this post


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

Edited by HappyHippyHippo

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

Share this post


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

Share this post


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

Share this post


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

Share this post


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

Share this post


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

Edited by 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.

Share this post


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

Share this post


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

Share this post


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

Share this post


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

Share this post


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

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.