Artigos .NET Preview da foto antes de enviar igual no Orkut

Artigo extraído do site: www.codigofonte.com.br

 

Autor: Renan Orati

                                                 

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.

 

Código:

 

<!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>