PUBLICIDADE
Este código tem nota
9

Autor

renanorati

Renan Orati

membro deste março de 2007

Tags

Compartilhe e guarde

  • Rec6
  • StumbleUpon
  • ueba
  • linkk
  • dihitt
  • linkloko
  • linkto
  • Technorati
  • Simpy
  • del.icio.us
  • Faves: Fave It!

PUBLICIDADE

Enquete

Você gostou das mudanças no layout aqui do site?

Preview da foto antes de enviar igual no Orkut


Este código pode ser utilizado em formulários que contenham envio de imagens.

Antes do usuário enviar a foto para o site (submit) ele pode ver um preview de como vai ficar sem precisar recarregar a janela do browser. Recurso semelhante existe no site de relacionamentos Orkut quando vamos alterar a imagem de exibição.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Função Preview</title>
<script language="javascript">
<!--
function preview() {
var largura = 640; //Largura da Imagem de Preview!
var altura = 480; //Altura da Imagem de Preview!
document.visualizar.src=document.form1.foto.value;
document.visualizar.width=largura;
document.visualizar.height=altura;
-->
}
</script>
</head>

<body>
<form id="form1" name="form1" method="post" enctype="multipart/form-data" action="">
  <table width="192" border="0" align="center">
    <tr>
      <td width="186"><div align="center" class="letraaz">
        <div align="left">Tamanho: <span class="letracz"><strong>640x480 </strong></span></div>
      </div></td>
    </tr>
    <tr>
      <td>
        <div align="left">
          <!-- Colocar aqui a chamada da Fun&ccedil;&atilde;o "PREVIEW" no evento "onchange" -->
          <input name="foto" type="file" id="foto" onchange="preview()" />
            </div></td></tr>
    <tr>
      <td><div align="center">
          <!-- tag imagem com o nome preview!
	      A imagem transparente space.gif
               está nos downloads -->
          <img src="space.gif" name="visualizar" width="6" height="2" id="fotoshow" /></div></td>
    </tr>
    <tr>
      <td><div align="center">
          <input type="submit" name="Submit" value="Inserir"/>
      </div></td>
    </tr>
  </table>
</form>
</body>
</html>

ArquivoTipoTamanhoHits 
preview.htmlArquivo HTML1,6 Kb1489Baixar o Arquivo
space.gifArquivo GIF55 bytes1116Baixar o Arquivo
Sim   Não   Este código foi útil para você?
NotaComentário
9
denunciar
netossf comentou em 19/3/2007

Evita problemas

esta função eh boa pois evita que fazermos upload de fotos erradas.
Regras:
Os comentários seguem as seguintes regras:
  • Todos os comentários são enviados por membros cadastrados no site.
  • A pontuação de comentários de conteúdo do próprio membro não serão computados.
  • Os comentários serão pré-aprovados, porém a equipe do site revisará o conteúdo de todos os comentários podendo ser invalidados (inclusive a pontuação).
  • Os comentários precisam ter, obrigatóriamente, coerência sobre o conteúdo que será comentado.
  • O membro que atingir 5 comentários invalidados não poderá mais comentar dentro do site. Com isso o membro não poderá mais ganhar pontos com comentários.
  • Há um limite de 10 comentários por dia para cada membro.
  • Qualquer comentário após ter sido publicado poderá ser retirado através da opção ( denunciar)

Comente

     (ainda não tem cadastro? clique aqui!)

Máximo de 30 caracteres

Máximo de 255 caracteres
 

R&W Consulting - Soluções Web Hospedagem UOL HOST PagSeguro - solução para pagamentos online
© 2006-2009 R&W Informática Ltda. - Todos os direitos reservados.