Validar dimensões de uma imagem de upload

LeoLoko · Março 25, 2008

Preciso validar as dimensões de uma imagem em um campo input=file, não pode ser após o envio da página, assim que o cara selecionar a imagem no pc dele, eu preciso verificar as dimensões dela.

Alguém tem idéia de como fazer isso?

SetaMB · Março 25, 2008

você já tentou fazer a função de validação qnd o input perde o foco (OnBlur)?

você pode fazer assim por exemplo:

<input ..... onblur="Valida_Extensao();">

<script type="text/javascript">

function Valida_Extensao() {

if (nomeform.campoform.value=="" || nomeform.campoform.value.indexOf('jpg**', 0) == -1 || nomeform.campoform.value.indexOf('.', 0) == -1)

{

alert ("Imagem inválida.");

return false;

}

return true;

}

(**) - Extenção permitida (jpg, gif, png, etc..)

LeoLoko · Março 26, 2008

Então, isso seria validação da extensão do arquivo, eu preciso validar as dimensões da imagem... tipo 200x200.. tendeu?

brcontainer · Março 26, 2008

ponha a imagem chamada pelo FILE dentro de um elemento com ID

use clientHeight e clientWidth para capturar as dimensões desta imagem ;)

ae leo fiz uma função basica:

* O CSS é para ocultar a imagem

* O setTimeout é por que onload atribuido a uma imagem no IE6 não funciona muito bem (e é sempre bom dar um intervalo) ;)

<style>
#ContIMG{
	position:absolute;
	width:0px;
	height:0px;
	overflow:hidden;
}
</style>

<script>
var Tmp="load";
function gerateImg(url){
	CaixaIMG = document.getElementById("ContIMG");
	oElement = document.createElement("img");
	oElement.setAttribute("src","file://"+url);
	oElement.setAttribute("onerror","alert('falha ao carregar arquivo.');");
	oElement.setAttribute("alt","foto");
	CaixaIMG.appendChild(oElement);
	if(Tmp=="load"){
		setTimeout("fPegaWH()",1000);
	}
}
function fPegaWH(){
	CaixaIMG = document.getElementById("ContIMG");
	PegaWH = CaixaIMG.getElementsByTagName("img");
	Larg = PegaWH[0].clientWidth;
	Altu = PegaWH[0].clientHeight;
	   alert("Largura:"+Larg + ", altura:" + Altu);
	var Tmp="false";
	throwawayNode = CaixaIMG.removeChild(PegaWH[0]);
}
</script>
<div id="ContIMG"></div>
<input type="file" value="" onchange="gerateImg(this.value)">

Carcleo · Março 1, 2009

Eu até consegui uma forma de fazer isso.

peguei um arquivo html só para texte e puiz o script abaixo e funcionou.

Mas, quando coloco ele no formulario que quero, ai ele da um erro de Out of

memory at line: 17

segue o código que funciona :D

<html>
<head>
<script>
function validaimagem() {
var extensoesOk = ",.gif,.jpg,.jpeg,.png,.gif,.bmp,";
var extensao	= "," + document.form.logomarca.value.substr( document.form.logomarca.value.length - 4 ).toLowerCase() + ",";
if (document.form.logomarca.value == "")
 {alert("O campo do endereço da imagem está vazio!!")}
else if( extensoesOk.indexOf( extensao ) == -1 )
 { alert( document.form.logomarca.value + "\nNão possui uma extensão válida" );java script:location.reload()}
else {java script:tamanhos()}	 
}
function tamanhos() {
var imagem=new Image();
imagem.src=document.form.logomarca.value;
tamanho_imagem = imagem.fileSize 
img_tan = tamanho_imagem
if (tamanho_imagem < 0)
 {java script:tamanhos()}
else if (tamanho_imagem > 150000)
{alert("O tamanho da Imagem é muito grande ...  "+tamanho_imagem+" Bytes!!");java script:location.reload()}
else 
{java script:ativafigura()}
}
function ativafigura() {
document.getElementById('logotipo').innerHTML = "<img border=\"0\" src=\""+document.form.logomarca.value+"\" name=\"img\" style=\"visibility: hidden\" >"
largura = document.getElementById("img").width;
altura = document.getElementById("img").height;
if (largura > 1200 || altura > 1200 )
  {alert("A imagem é "+largura+"x"+altura+" está fora do padrão requerido");java script:location.reload()}
					   }
</script>
</head>
<body>
<form name="form" enctype="multipart/form-data" method="post" action="jogoupload_gravar.asp" id="form">
<p>Escolha a foto:</p>
<p>
<input type="file" name="logomarca" size="20" class="form2" onChange="validaimagem();">
<div id="logotipo"></div>
</p>
</form>

</body>
</html>

E agora egue o código que não funciona http://forum.imasters.com.br/public/style_emoticons/default/blush.gif

claro que tem código php ai no meio mas da erro de Javascript. Dai tirei o php para não confundir

<H1>Olá Carlos!</H1><html>
<head>
<title>Muriaé Em Rede ::::::  AMBIENTE ADMINISTRATIVO</title>
<script> 
function validaimagem() {
var extensoesOk = ",.gif,.jpg,.jpeg,.png,.gif,.bmp,";
var extensao	= "," + document.form.logomarca.value.substr( document.form.logomarca.value.length - 4 ).toLowerCase() + ",";
if (document.form.logomarca.value == "")
 {alert("O campo do endereço da imagem está vazio!!")}
else if( extensoesOk.indexOf( extensao ) == -1 )
 { alert( document.form.logomarca.value + "\nNão possui uma extensão válida" );java script:location.reload()}
else {
   	java script:tamanhos();
	  }
}
function tamanhos() {
var imagem=new Image();
imagem.src=document.form.logomarca.value;
tamanho_imagem = imagem.fileSize 
img_tan = tamanho_imagem
if (tamanho_imagem < 0)
 {java script:tamanhos()}
else if (tamanho_imagem > 150000)
{alert("O tamanho da Imagem é muito grande ...  "+tamanho_imagem+" Bytes!!");java script:location.reload()}
else 
{java script:ativafigura()}
}
function ativafigura() {
document.getElementById('logotipo').innerHTML = "<img border=\"0\" src=\""+document.form.logomarca.value+"\" name=\"img\" style=\"visibility: hidden\" >"
largura = document.getElementById("img").width;
altura = document.getElementById("img").height;
if (largura > 1200 || altura > 1200 )
  {alert("A imagem é "+largura+"x"+altura+" está fora do padrão requerido");java script:location.reload()}
					   }
</script>
<script language="javascript"> 
<!--
function CriticaFormulario()
{		
		if (document.form.email.value == "")
	{
		alert("Preencha Email: campo obrigatório!!!");
		document.form.email.focus();
		return (false);
	}
   	atPos = document.form.email.value.indexOf("@",1);
	periodPos = document.form.email.value.indexOf(".",atPos);
		 if ((atPos == -1) || (document.form.email.value.indexOf("@",atPos+1) > -1) || (periodPos == -1) || (periodPos+3 > document.form.email.value.length))
	{
		 alert("Teu e-mail foi digitado incorretamente. Verifique se foi digitado com o seguinte padrão: teuemail@teuprovedor.finalização");
		document.form.email.focus();
		return (false);
	}
 
 
		if (document.form.nome.value == "")
	{
		alert("Preencha nome: campo obrigatório !");
		document.form.nome.focus();
		return (false);
 
	}	
		 if (document.form.cpf.value == "")
	 {
		 alert("O campo cpf Está Vazio !!!");
		 document.form.cpf.focus();
		 return (false);
	 }
	 var ver_numero = "1234567890";
	 var sk15 = document.form.cpf.value;
	 sk15 = sk15.replace('.', '');
	 sk15 = sk15.replace('.', '');
	 sk15 = sk15.replace('-', '');
	 var invalido = true;
		 for (i = 0;  i < sk15.length;  i++)
	 {
		 ch = sk15.charAt(i);
		 for (j = 0;  j < ver_numero.length;  j++)
		 if (ch == ver_numero.charAt(j))
		 break;
		 if (j == ver_numero.length)
			{
			   invalido = false;
			   break;
			}
	  }
		 if (!invalido)
	  {
		 alert("O Campo cpf Deve Conter Apenas Números !!!");
		 document.form.cpf.focus();
		 return (false);
	  }
		 if (sk15.length < 11)
	  {
		 alert("O campo cpf Deve Ter 11 Números !!!");
		 document.form.cpf.focus();
		 return (false);
	   }
		 if (sk15.length > 11)
	   {
		 alert("O campo cpf Deve Ter apenas 11 Números !!!");
		 document.form.cpf.focus();
		 return (false);
		}
		if (document.form.endereco.value == "")
	{
		alert("Preencha endereco: campo obrigatório !");
		document.form.endereco.focus();
		return (false);
 
	}	
 
		 if (document.form.numero.value == "")
	{
		 alert ("O campo " + document.form.numero.name + " deve ser preenchido!");
		 document.form.numero.focus(); 
		 return (false);
 
	 }
	
		 if (document.form.bairro.value == "")
	{
		 alert ("O campo " + document.form.bairro.name + " deve ser preenchido!");
		 document.form.bairro.focus(); 
		 return (false);
 
	 }
		if (document.form.estado.value == "#")
	{
		 alert ("O " + document.form.estado.name + " deve ser selecionado!");
		 document.form.estado.focus(); 
		 return (false);
 
	 }
		if (document.form.cidade.value == "#")
	{
		 alert ("O " + document.form.cidade.name + " deve ser selecionada!");
		 document.form.cidade.focus(); 
		 return (false);
 
	 }
	 var CampoTel = document.form.telefone.value;
	 CampoTel = CampoTel.replace('(', '');
	 CampoTel = CampoTel.replace(')', '');
	 CampoTel = CampoTel.replace('-', '');
		   if (CampoTel == "")
	{
		 alert ("O campo " + document.form.telefone.name + " deve ser preenchido!");
		 document.form.telefone.focus(); 
		 return (false);
 
	 }
		 if (isNaN(CampoTel))
	 {
		 alert ("O campo " + document.form.telefone.name + " deve conter apenas numeros!"); 
		 document.form.telefone.focus(); 
		 return (false);
	 }
	   if (CampoTel.length < 10)
	  {
		 alert ("O campo " + document.form.telefone.name + " Deve conter 10 Números !!!");
		 document.form.telefone.focus();
		 return (false);
	   }
		 if (CampoTel.length > 10)
	   {
		 alert ("O campo " + document.form.telefone.name + " Deve conter 10 Números !!!");
		 document.form.telefone.focus();
		 return (false);
		}
	   if (document.form.seguimento.value == "#")
	{
		 alert ("O " + document.form.seguimento.name + " deve ser selecionado!");
		 document.form.seguimento.focus(); 
		 return (false);
 
	 }
		if (document.form.subseguimento.value == "#")
	{
		 alert ("O " + document.form.subseguimento.name + " deve ser selecionado!");
		 document.form.subseguimento.focus(); 
		 return (false);
 
	 }   
	 
 // NÃO VALIDAR TEXTAREA
	 
	document.form.submit();
}
 
//-->
</script>
 
<script language="JavaScript" src="mascaras.js"></script>
<script language="JavaScript" src="bloqueios.js"></script>
<script language="JavaScript" src="buscahtmlarea.js"></script>
<script language="JavaScript" src="buscacidade.js"></script>
<script language="JavaScript" src="buscasubseguimento.js"></script>
</head>
 
<table width="100%"  border="0" cellspacing="0" cellpadding="0">
  <tr>
	<td colspan="2"><table border="0" cellpadding="0" cellspacing="0" width="708">
  <tr> 
	<td colspan="2" rowspan="3"><div align="right"><img src="../figuras/adimin.jpg" border="0"></div></td>
  </tr>
</table>
</td>
  </tr>
  <tr valign="top">
	<td width="150"><style type="text/css"> 
<!--
.style1 {font-family: Arial}
.style3 {font-family: Arial; font-size: 14px; }
-->
</style>
<table border="1"	 bordercolor="#F2F2F2" class="style3">
<tr><td><a href="../global/menu.php?acao=logout">Sair</a></td>
</tr>
<tr>
  <td><b> </b><a href="../paginas_controle/Verifica_Emails_Recebidos.php?acao=VerEmail" target=blank>Verificar emails recebidos</a> </td>
</tr>
<tr>
  <td width=162><p><a href="../paginas_controle/Administracao.php"> Página Principal</a> </p></td>
</tr>
 
<tr><td><font size=-1><b> * Mala Direta </b><br>
<a href="mala.php?acao=form">Enviar Mala Direta</a><br>
</td></tr>
 
 
<tr><td width=162><b>* Administradores </b><br>
<a href="../paginas_controle/Cadastro_Administradores.php">Cadastrar</a><br>
<a href="../paginas_controle/Alteracao_Administradores.php?acao=editar">Alterar</a>
</td>
</tr>
 
<tr>
  <td><b>* Anunciantes </b><br>
<a href="../paginas_controle/Cadastro_Anunciantes.php">Cadastrar</a><br>
<a href="../paginas_controle/Alteracao_Anunciantes.php?acao=editar">Alterar</a></td>
</tr>
 
<tr>
  <td><b>* Busca</b><br>
<a href="../paginas_controle/Busca.php?acao=localiza">Localiza</a></td>
</tr>
 
<tr>
  <td><b>* Imóveis Venda </b><br>
	<a href="../paginas_controle/Cadastro_ImoveisVenda.php">Cadastrar</a>	<br>
	<a href="../paginas_controle/Alteracao_ImoveisVenda.php?acao=listar">Alterar em aberto </a><br>
	<a href="../paginas_controle/Alteracao_ImoveisVenda_Baixa.php?acao=listar">Alterar em baixa </a> </td>
</tr>
 
 
 
</table>
</td>
	<td width="870">
<style type="text/css"> 
<!--
.style1 {font-family: Arial}
-->
</style>
<form action="" name="form" method="POST" enctype="multipart/form-data"><P>
<center>
  <H2>Formulário de Cadastro de Anunciantes </H2>
</center><P><p>
<TABLE border=2 cellpadding=5 cellspacing=5 align=center width=100%>
<tr>
	<td colspan=2>
	<TABLE>
	<TR>
	  <TD>E-mail:</TD>
	  <TD><INPUT TYPE="text" NAME="email" VALUE="" SIZE=60 MAXLENGTH=60></TD>
	</TR>
	<TR>
	<TD>Nome:</TD>
	<TD><INPUT TYPE="text" NAME="nome" VALUE="" SIZE=60 MAXLENGTH=60></TD>
	</TR>
	<TR>
	<TD>Cpf:</TD>
	<TD><INPUT TYPE="text" NAME="cpf" onkeypress="MascaraCpf(this,event);BloqueiaLetras()"   VALUE="" SIZE=14 MAXLENGTH=14></TD>
	</TR>	
	<TR>
	<TD>Endereço:</TD>
	<TD><INPUT TYPE="text" NAME="endereco" VALUE="" SIZE=60 MAXLENGTH=60></TD>
	</TR>
	<TR>
	<TD>Número:</TD>
	<TD><INPUT TYPE="text" NAME="numero" VALUE="" SIZE=14 MAXLENGTH=14></TD>
	</TR>
	<TR>
	<TR>
	<TD>Bairro:</TD>
	<TD><INPUT TYPE="text" NAME="bairro" VALUE="" SIZE=60 MAXLENGTH=60></TD>
	</TR>
	 <TR>
	<TD>Estado:</TD>
	<TD>
<select name="estado" onChange="DadosCidade(this.value);"  size="1" style="width:200px">
		<option value="#">Selecione o estado>></option>
		<option value="AC">AC</option>
		<option value="AL">AL</option>
		<option value="AM">AM</option>
		<option value="AP">AP</option>
		<option value="BA">BA</option>
		<option value="CE">CE</option>
		<option value="DF">DF</option>
		<option value="ES">ES</option>
		<option value="GO">GO</option>
		<option value="MA">MA</option>
		<option value="MG">MG</option>
		<option value="MS">MS</option>
		<option value="MT">MT</option>
		<option value="PA">PA</option>
		<option value="PB">PB</option>
		<option value="PE">PE</option>
		<option value="PI">PI</option>
		<option value="PR">PR</option>
		<option value="RJ">RJ</option>
		<option value="RN">RN</option>
		<option value="RO">RO</option>
		<option value="RR">RR</option>
		<option value="RS">RS</option>
		<option value="SC">SC</option>
		<option value="SE">SE</option>
		<option value="SP">SP</option>
		<option value="TO">TO</option>
	</select>	</TD>
	</TR>
	<TR>
	<TD>Cidade:</TD>
	<TD>
	<select name="cidade"  id="cidade" size="1" style="width:200px">
			<option id="opcoescidade" value="#">Primeiro selecione o estado!</option>
		 </select>
   	</TD>
	</TR>	
	<TR>
	<TD>Telefone:</TD>
	<TD><input type="text" name="telefone"  onkeypress="MascaraTelefone('telefone', window.event.keyCode, 'document.form.telefone');;BloqueiaLetras()"   value="" size=13 maxlength=13></TD>
	</TR>
	<TR>
	<TD>Seguimento:</TD>
	<TD>
	<select name="seguimento" onChange="DadosSubSeguimento(this.value);"  size="1" style="width:200px">
	<option value="#" selected>Selecione o Seguimento:</option>
	<option value="1"> Abastecimento </option><option value="2"> Acessoria & Consultoria </option><option value="3"> Alimentação </option><option value="4"> Automóveis </option><option value="5"> Beleza </option><option value="6"> Casa & Construção </option><option value="7"> Casa & Decoração </option><option value="8"> Comércio Geral </option><option value="9"> Comunicação </option><option value="10"> Diversão e lazer </option><option value="11"> Educação & Cultura </option><option value="12"> Eletrônicos </option><option value="13"> Floricultura e Jardinagem </option><option value="14"> Gastronomia </option><option value="15"> Informática </option><option value="16"> Religião </option><option value="17"> Saúde Animal </option><option value="18"> Saúde </option><option value="19"> Telefonia </option><option value="20"> Trânsito </option><option value="21"> Vestuário </option>				   
	 </select>
		
	</TD>
	</TR>	
	 <TR>
	<TD>Sub Seguimento:</TD>
	<TD>
	<select name="subseguimento" id="subseguimento" size="1" style="width:200px">
			<option id="opcoessubseguimento" value="#">Primeiro selecione o seguimento!</option>
	 </select>
	</TD>
	</TR>	
	 <TR>
	<TD>Logomarca:(Se houver):</TD>
	<TD>
	<input  type="file" name="logomarca" size="20" class="base_caixa" onChange="validaimagem();">
	<input name="MAX_FILE_SIZE" type="hidden" value="1">
	<div id="logotipo"></div>
	<br><font color="#CC0000">Atenção: A logomarca não pode ter mais que 1mb, 1000px de tamanho e largura</font>
	</TD>
	</TR>	
	<TR>
	<TD>Página:</TD>
	<TD>
	<textarea name="pagina" id="pagina" style="width:650; height:600">
	</textarea>
	 <script language="javascript1.2">
		editor_generate('pagina');
	  </script>
	</TD>
	</TR>
	</TABLE>	
	</TD>
</tr>
</table><P>
<center>
<input type="button" value="Enviar" onClick="CriticaFormulario()">
<input type="reset"  value="Limpar Campos"> 
</center>
</FORM></td>
  </tr>
  <tr>
	<td colspan="2"></td>
  </tr>
</table>
 
</body>
</html>

Entrar

Arquivado

Validar dimensões de uma imagem de upload

Recommended Posts

LeoLoko 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

SetaMB 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

LeoLoko 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

brcontainer 16

Compartilhar este post

Link para o post

Compartilhar em outros sites

Carcleo 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Verificar usuário

Pegar o nome do input text do formulário submetido

Codeigniter - Como enviar múltiplos e-mails com PHPmailer

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante