Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Carcleo

validar imagem antes do upload

Recommended Posts

Ola pessoal,

tenho no meu formulario, um campo para upload de imagem

<input class="base_caixa" type="file" name="logomarca">
Acontece que antes de enviar esse formulario, gostaria de verificar as dimensões width e height são maiores de 800 pixeus.; Se for, limpa o campo e manda(da uma mensagem) que o ususario, ou troque a imagem ou redimensiona em um editor de imagens.

isso se dará na hora em que o usuario deixar o campo e ir para outro campo.;

 

Como ficaria uma função assim?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Dá uma olhada nessa função que o silverfox postou:

http://forum.imasters.com.br/index.php...t&p=1005062

Compartilhar este post


Link para o post
Compartilhar em outros sites

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>

Compartilhar este post


Link para o post
Compartilhar em outros sites

Bom, observei que esta dando erro de timeout e só esta acontecendo quando jogo no servidor.

Caso seja apenas arquivo html e fora do servidor ai funciona normal.;

Como resolver esse problema:

 

eis o código:

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

Bom dia pessoal!

Melhorando um pouco a explicaçao dos problemas:

Tenho aqui 02 Problemas que estão me tirando o sono:

 

1) Tenho um form onde um dos campos é um campo de upload de imagem e tenho um scrtipt para validar essa imagem quanto a peso e medidas.

Bom, quando faço um form simples em um arquivo html e rodo ele no IE mas fora do servidor (tanto local quanto na web), o script funciona normal, mas quando jogo no servidor ele da a seguinte mensagem:

Out of memory at line: 10
Eis o código da pagina:

<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>
Como posso resolver isso?

 

2) Bom o segundo problema é o seguinte:

Tenho o códigio abaixo deo arquivo cidade.js que é chamado de dentro de um arquivo php que contem o formulario.

Preciso arranjar uma forma de a partir do arquivo php, na linha que chama o js, enviar parametro tipo

<script language="JavaScript" src="cidade.js?campo=cidade"></script>
Eu preciso la no arquivo js resgatar essa variavel campo para usala la da seguinte forma:

Onde tiver a palavra cidade no código abaixo tenho que trocar pela variavel campo que entregar seu valor.

Voces podem observar que em alguns lugares, ja consegui colocar a variavel campo nesse código mas nos lugares onde ainda a palavra cidade esta, nesse sainda não consaegui.

Então preciso de sabner como recuperar a variavel campo no js passado pela url e preciso saber como aplica-la nos lugares onde ainda esta a palavra cidade.

se fosse em php seria assim:

$campo = $_GET["campo"];

function Dados<?=$campo;?>(valor) {
...
Mas em JavaScript não estou consegindo

 

function DadosCidade(valor) {
	  //verifica se o browser tem suporte a ajax
	  try {
		 ajax = new ActiveXObject("Microsoft.XMLHTTP");
	  } 
	  catch(e) {
		 try {
			ajax = new ActiveXObject("Msxml2.XMLHTTP");
		 }
		 catch(ex) {
			try {
			   ajax = new XMLHttpRequest();
			}
			catch(exc) {
			   alert("Esse browser não tem recursos para uso do ajax");
			   ajax = null;
			}
		 }
	  }
	  //se tiver suporte ajax
	  if(ajax) {
		 //deixa apenas o elemento 1 no option, os outros são excluídos
		 document.forms[0].cidade.options.length = 1;
		 
		 idOpcao  = document.getElementById("opcoescidade");
		 
		 ajax.open("POST", "cidade.php", true);
		 ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		 
		 ajax.onreadystatechange = function() {
			//enquanto estiver processando...emite a msg de carregando
			if(ajax.readyState == 1) {
			   idOpcao.innerHTML = "Carregando...!";   
			}
			//após ser processado - chama função processXMLCidades que vai varrer os dados
			if(ajax.readyState == 4 ) {
			   if(ajax.responseXML) {
				  processXML(ajax.responseXML);
			   }
			   else {
				   //caso não seja um arquivo XML emite a mensagem abaixo
				   idOpcao.innerHTML = "Primeiro selecione o estado>>";
			   }
			}
		 }
		 //passa o código do estado escolhido
		 var params = "estado="+valor;
		 ajax.send(params);
	  }
   }
   
   function processXMLCidade(obj){
	  //pega a tag cidade
	  var dataArray   = obj.getElementsByTagName("cidade");
	  
	  //total de elementos contidos na tag cidade
	  if(dataArray.length > 0) {
		 //percorre o arquivo XML paara extrair os dados
		 for(var i = 0; i < dataArray.length; i++) {
			var item = dataArray[i];
			//contéudo dos campos no arquivo XML
			var codigo	=  item.getElementsByTagName("codigo")[0].firstChild.nodeValue;
			var descricao =  item.getElementsByTagName("descricao")[0].firstChild.nodeValue;
			
			idOpcao.innerHTML = "Selecione uma das opções abaixo>>";
			
			//cria um novo option dinamicamente  
			var novo = document.createElement("option");
				//atribui um ID a esse elemento
				novo.setAttribute("id", "opcoescidade");
				//atribui um valor
				novo.value = codigo;
				//atribui um texto
				novo.text  = descricao;
				//finalmente adiciona o novo elemento
				document.forms[0].cidade.options.add(novo);
		 }
	  }
	  else {
		//caso o XML volte vazio, printa a mensagem abaixo
		idOpcao.innerHTML = "Primeiro selecione o estado>>";
	  }	  
   }

Compartilhar este post


Link para o post
Compartilhar em outros sites

Explicacao: primeiro procura a imagem no atraves do input field, depois quando onblur vai carregar a imagem numa div e assim que a imagem e carregada mostra a resolucao da mesma. Agora e so usar umas validacoes para a extensao da imagem, e usar os valores da funcao escreve para validar ou nao o upload e e isso

 

nota: aquele imagem carregada... foi msg so para teste, script testado localmente e no FF

 

<!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=utf-8" />
<title>Untitled Document</title>
<script>
function a(){
caminho=document.getElementById("fileField").value;
x="file:///"+caminho;
alert(x)
document.getElementById("imagem").innerHTML="Imagem carregada .... <br> <img src='"+x+"' id='importada' onload='java script:escreve(this.width,this.height)' />"
}

function escreve(w,h){
alert(w+"*"+h)
}
</script>
</head>

<body>
<form action="" method="post" enctype="multipart/form-data" name="form1" id="form1" onblur="a()">
  <label>
  <input type="file" name="fileField" id="fileField" />
  </label>
  <p><div id="imagem"></div> </p>
</form>
</body>
</html>

Compartilhar este post


Link para o post
Compartilhar em outros sites

Uso Apache 2.

 

Rodando teu script fora do servidor, ele roda normal até a função escreve mas a função escrevbe, não roda e no servbidor não mostra a figura.

 

o que você quiz dizer com:

 

script testado localmente e no FF

?

Compartilhar este post


Link para o post
Compartilhar em outros sites

pois quando eu disse que testei localmente foi pk foi sem ser no servidor e no firefox.

 

Diga-me ao certo o que nao funciona, a funcao escreve deve funcionar veja se na fncao a nao esta mal a chamada da funcao, pk aqui no forum javascript fica com espaco e e sem espaco

 

 

Depois se nao for esse o problema faca o seguinte:

 

veja o que o alert(x) diz! o problema deve estar na variavel x pk se nao carregar o caminho correto o resto nao funciona

 

note: no servidor nao sei como a imagem e carregada, mas localmente so escreve da seguinte forma file:// + caminho do input

 

 

Imagem Postada

 

Testando no Apache vi que nao carrega pk ou e por causa do caminho que e diferente para o servidor ou entao nao vai buscar a imagem sem ela estar carregada no mesmo (servidor), e se for isso a solucao e criar ficheiro temporario e se nao for validado elimina

Compartilhar este post


Link para o post
Compartilhar em outros sites

Minha duvida é a seguinte:

 

Eu pego o teu arquivo

 

e tiro duas cópia sddele. Ok?

 

Pois bem.

 

Uma eu cvoloco na pasta meus documentos e abro o teu arquivo que dei o noime de arquivo.html a partir de meus documentos. Em cada browser a resposta é diferente mas em todos o script frunciona.

 

Outra cópia colocvo na pasta httdocs do apache server e rodo no IE. O mesmo arquivo, o mesmo código fonte. Da pau.;

Out of memory at line: 11

Parece que vbalidfações co,m js não são seguiras.;

Estou quase desistinmdo disso.

 

Mas, e quanto o meus segundo probnlema?

O da variavel js recebendo valores da url. Voce tem como me ajudar?

Compartilhar este post


Link para o post
Compartilhar em outros sites

SaBE, O SCRIPT que estou postando abaixo funciona normal porem, só fora do servbidor.;

 

Colo no servidor da erro

function verifica_extencao() {
var extensoesOk = ",.gif,.jpg,.jpeg,.png,.bmp,";
var alturaOk = 1000;
var larguraOk = 1000;
var pesoOk = 1500000;
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 {
		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 >larguraOk || altura > alturaOk )
		{alert("A imagem é "+largura+"x"+altura+" está fora do padrão requerido");java script:location.reload()}
		else {
			   var imagem=new Image();
			   imagem.src=document.form.logomarca.value;
			   tamanho_imagem = imagem.fileSize 
			   img_tan = tamanho_imagem
			   if (tamanho_imagem > pesoOk)
				{alert("O tamanho da Imagem é muito grande ...  "+tamanho_imagem+" Bytes!!");java script:location.reload()}
			 }
	  }
							 }
todos eles estão apresentando o mesmo erro.

poe no servidor da pau.

se roda a partior de meus documentos é uma beleza.

Compartilhar este post


Link para o post
Compartilhar em outros sites

pois e a solucao vai ser mesmo você criar atraves do php ou do asp um arquivo temporario tipo uma pasta temp entao isso funcionaria do seguinte modo

 

você tem duas pastas a temp e a upload

 

entao no form ele iria carregar a imagem mas sem submeter ou seja usando ajax seria facil, depois o php ou asp iriam a pasta temp atraves do comando apropriado buscar as dimensoes e elas forem validas entao a imagem e movida para a pasta upload e gravado o camninho no banco senao a imagem seria eliminada da pasta temp e returnaria o erro

 

 

E isso ae em teoria acho que e a solucao

Compartilhar este post


Link para o post
Compartilhar em outros sites

Gente.

Peço perdão pelas up's mas é que entendo que o problema é de servidor.;

 

Seguinte.

 

Se rodo o arquivo por exemplo a partir da pasta meus documentos, o script roda legal.(calro que só a parte html e ajax e o arquio renomeado para html)

 

Mas, se jogo ele no servidor ai não roda.

veja o que eu estou falando:

Crie um, arquivo com, este codigo e salve ele como .html e rode ele a partir de meus documentos. Vera que funcionara normal.

depois, jogue ele dentro da pasta htdocs do apache e roda ele a partir do servidor(http://localhost/arquivo.html).

Vera o que estou falando:

Talves o problema possa SER CONMFIGURAÇÃO do php ou deo Apache.

 

arquivo.html:

<html>
<head>
<title>Teste</title>
<script> 
function verifica_extencao() {
var extensoesOk = ",.gif,.jpg,.jpeg,.png,.bmp,";
var alturaOk = 1000;
var larguraOk = 1000;
var pesoOk = 1500000;
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 {
		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 >larguraOk || altura > alturaOk )
		{alert("A imagem é "+largura+"x"+altura+" está fora do padrão requerido");java script:location.reload()}
		else {
			   var imagem=new Image();
			   imagem.src=document.form.logomarca.value;
			   tamanho_imagem = imagem.fileSize 
			   img_tan = tamanho_imagem
			   if (tamanho_imagem > pesoOk)
				{alert("O tamanho da Imagem é muito grande ...  "+tamanho_imagem+" Bytes!!");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 logotipo:</p>
<p><input type="file" name="logomarca" size="20" class="form2" id="logomarca" onChange="verifica_extencao()"></p>
<div id="logotipo"></div>
</form>
</body>
</html>

Compartilhar este post


Link para o post
Compartilhar em outros sites

Vamo resolver seu problema. vou tentar fazer o code

Compartilhar este post


Link para o post
Compartilhar em outros sites

Finalmente! depois de umas horas acabei

 

 

ora, primeiro vamos a explicacoes importantes:

 

1. tera de criar no htdocs uma pasta chamada upload, no mesmo lugar onde tem as paginas php

 

2º mto importante o script funciona do seguinte modo você vai a pagina inicial (frm.php) e escolhe o ficheiro escolha um valido pk ainda nao tem a validacao de extensoes, depois isso vai carregar a upload.php que por sua vez recebe e faz upload da imagem, assim que faz upload verifica as dimensoes e neste caso o maixomo e 800*600 (veja o javascript) na pagina de upload.php se a imagem for maior chama o ajax que vai a pagina apagar.php que apaga o ficheiro aqui e que esta o grande problema você TEM DE MUDAR OS PREVILEGIOS DO SEU APACHE PARA QUE PERMITA REMOVER O FICHEIRO SENAO NAO REMOVERA E DARA ERRO, eu por exemplo uso o xampp e fui na pagina phpmyadmin a previlleges e coloquei a opcao para poder fazer tudo e funciona.

 

3. explicacao resumida, escolhe imagem faz upload vai buscar as dimensoes se as dimensoes forem maiores do que o que esta no js apaga senao mantem a imagem

 

 

Mas vou facilitar, faca upload de tudo ja feito, há mas nao se esqueca tem de mudar os previlegios senao caso o ficheiro na seja valido nao sera eliminado e dara erro

 

 

http://www.4shared.com/file/91244538/fcd51b6c/teste2009.html

Compartilhar este post


Link para o post
Compartilhar em outros sites

Webmind.

Quero te agradecer profundamente o esforço em me ajuidar mas o que esta acontecendo é o seguinte:

 

Analizei (e testei) teu codigo porem aconteram algumas coisas:

 

1) imagem de qualquer tamanho passam, faz o upload (inclusive maiores que 800x600).

 

2) o teu código primeiro o php entra em ação e depois o javascript. O que eu queria é que o JavaScript analise primeiro a imagem e se tudo estiver certo ai sim vai para php.

 

3) O meu código esta funcinando correto (D://Arquivos de Programas/Apache Group/Apache/httpdocs/testes/pagina.html).

Só que quando jogo no servidor (http://localhost/testes/pagina.html) ele da aquele erro de Out of memory at line: 11.

Nesse caso é outra pagina html que fiz usando o mesmo script para validar a imagem.

 

4) Na realidade, posso alterar tudo aqui na minha maquina local. Mas, e la no servidor da hospedagem????

 

5) Resumindo: O comportamento do teu script, é igual ao meu ocorrendo os mesmos erros. Acho que vou ficar com a validação somente do lado do servidor.

É dificil entender que uma figura de 800x600 esgota o memoria de uma maquina a ponto de dar aquele aviso: Out of memory at line: 11.

 

5) Pelo php, ja faço toda a validação necessaria. Veja o código abaixo:

Alteracao_Logo.php

<? include("../global/sessoes.php"); ?>
<? $Nome_admin = split(' ',$NAME); ?>
<? test_login(); echo "<H1>Olá $Nome_admin[0]!</H1>"; ?>
<? include("../../global/conecta.php"); ?>
<html>
<head>
<title><?php echo $title; ?></title>
<script language="JavaScript" src="../global/validaimagem.js"></script>
<script language="JavaScript" src="../global/bloqueios.js"></script>
</head>
<body>
<table width="100%"  border="0" cellspacing="0" cellpadding="0">
  <tr>
	<td colspan="2"><? include("../global/topo.php"); ?></td>
  </tr>
  <tr valign="top">
	<td width="150"><?php include("../global/menu.php"); ?></td>
	<td width="870"><?php include("Alteracao_Logo_Conteudo.php"); ?></td>
  </tr>
  <tr>
	<td colspan="2"><?php include("../global/base.php"); ?></td>
  </tr>
</table>

</body>
</html>

 

Alteracao_Logo_Conteudo.php

<?
//Inicio do envio dos dados
if ($acao == "altera"){	
if (!$logomarca) {
 echo ("<script>java script:imagem_vazia();</script>");
	  $logomarca = "";
	  $consulta = mysql_query("UPDATE anunciantes SET logotipo='$logomarca' WHERE id='$id'");
	  if($consulta){echo "<script>alert('Alteração OK!'); document.location='Alteracao_Anunciantes.php?acao=editar'</script>"; } 
	  else {echo "<script>alert('Não foi possivel realizar a tua atualização por favor tente novamente!'); document.location='Alteracao_Anunciantes.php?acao=editar'</script>"; }
				}
else			{				
if ($MAX_FILE_SIZE){

$erro = $config = array();

// Prepara a variável do arquivo
$arquivo = isset($_FILES["logomarca"]) ? $_FILES["logomarca"] : FALSE;

// Tamanho máximo do arquivo (em bytes)
$config["tamanho"] = 1500000;
// Largura máxima (pixels)
$config["largura"] = 1000;
// Altura máxima (pixels)
$config["altura"]  = 1000;

// Formulário postado... executa as ações
if($arquivo){  
	// Verifica se o mime-type do arquivo é de imagem
	if(!eregi("^image\/(pjpeg|jpeg|png|gif|bmp)$", $arquivo["type"]))
	{
		$erro[] = "Arquivo em formato inválido! A imagem deve ser jpg, jpeg, 
			bmp, gif ou png. Envie outro arquivo";
	}
	else
	{
		// Verifica tamanho do arquivo
		if($arquivo["size"] > $config["tamanho"])
		{
			$erro[] = "Arquivo em tamanho muito grande! 
		A imagem deve ser de no máximo " . $config["tamanho"] . " bytes. 
		Envie outro arquivo";
		}
		
		// Para verificar as dimensões da imagem
		$tamanhos = getimagesize($arquivo["tmp_name"]);
		
		// Verifica largura
		if($tamanhos[0] > $config["largura"])
		{
			$erro[] = "Largura da imagem não deve 
				ultrapassar " . $config["largura"] . " pixels";
		}

		// Verifica altura
		if($tamanhos[1] > $config["altura"])
		{
			$erro[] = "Altura da imagem não deve 
				ultrapassar " . $config["altura"] . " pixels";
		}
	}
	
	// Imprime as mensagens de erro
	if(sizeof($erro))
	{
		foreach($erro as $err)
		{
			echo " - " . $err . "<BR>";
		}

		echo "<a href=\"Cadastro_Anunciantes.php\">Fazer Upload de Outra Imagem</a>";
	}

	// Verificação de dados OK, nenhum erro ocorrido, executa então o upload...
   else
	{
		// Pega extensão do arquivo
		preg_match("/\.(gif|bmp|png|jpg|jpeg){1}$/i", $arquivo["name"], $ext);

   //  Retira a extensao do nome do arquivo
$nome_sem_extensao = "$arquivo[name]";
$nome_sem_extensao = basename ($nome_sem_extensao,".gif");
$nome_sem_extensao = basename ($nome_sem_extensao,".jpeg");
$nome_sem_extensao = basename ($nome_sem_extensao,".jpg");
$nome_sem_extensao = basename ($nome_sem_extensao,".bmp");
$nome_sem_extensao = basename ($nome_sem_extensao,".png");

  //  Retira espaços em branco do nome do arquivo
$nome_banco = str_replace(" ","_",$nome_sem_extensao);

		//Gera um nome único para a imagem
		$imagem_nome = $nome_banco . "." . md5(uniqid(time())) . "." . $ext[1];
	   // Caminho de onde a imagem ficará
		$imagem_dir = "../../img/logo/normal/" . $imagem_nome;
		$imagem_dir2 = "../../img/logo/mini/" . $imagem_nome;
		$imagem_dir3 = "../../img/logo/mini";
		
if(!file_exists("../../img/logo/")){
mkdir("../../img/logo",'0775'); // cria uma pasta com permissões para gravar arquivos
}
if(!file_exists("../../img/logo/normal/")){
mkdir("../../img/logo/normal/",'0775'); // cria uma pasta com permissões para gravar arquivos
}
if(!file_exists("../../img/logo/mini/")){
mkdir("../../img/logo/mini/",'0775'); // cria uma pasta com permissões para gravar arquivos
}
//Cria os diretórios com mkdir

/*envia a imagem para a pasta*/
$copy= copy($arquivo["tmp_name"], $imagem_dir);

//IMAGEM A SER ABERTA
$imagem = $arquivo['tmp_name']; 

//DEFINE OS PARÂMETROS DA MINIATURA
$largura = 2 * $tamanhos[0];
$altura =  2 * $tamanhos[1]; 

//NOME DO ARQUIVO DA MINIATURA Igual o nome da original
$imagem_gerada = $imagem_nome;

//CRIA UMA NOVA IMAGEM
$imagem_orig = ImageCreateFromJPEG($imagem);
//LARGURA
$pontoX = ImagesX($imagem_orig);
//ALTURA
$pontoY = ImagesY($imagem_orig); 

//CRIA O THUMBNAIL
$imagem_fin = ImageCreateTrueColor($largura, $altura); 

//COPIA A IMAGEM ORIGINAL PARA DENTRO
ImageCopyResampled($imagem_fin, $imagem_orig, 0, 0, 0, 0, $largura+1, $altura+1, $pontoX, $pontoY); 

//SALVA A IMAGEM
ImageJPEG($imagem_fin, "$imagem_dir3/".$imagem_gerada,100); 

//LIBERA A MEMÓRIA
ImageDestroy($imagem_orig);
ImageDestroy($imagem_fin);

$logo = $imagem_nome;
	  $consulta = mysql_query("UPDATE anunciantes SET logotipo='$logo' WHERE id='$id'");
	  if($consulta){echo "<script>alert('Alteração OK!'); document.location='Alteracao_Anunciantes.php?acao=editar'</script>"; } 
	  else {echo "<script>alert('Não foi possivel realizar a tua atualização por favor tente novamente!'); document.location='Alteracao_Anunciantes.php?acao=editar'</script>"; }
}
}
}
}
}
?>


<?
if ($acao == "alterar"){	
$busca = mysql_query("SELECT id, nome, logotipo FROM anunciantes where id='$id'");
$num_linhas= mysql_num_rows($busca);
if ($num_linhas==0) {echo "<script>alert('Não há esse anunciante!'); document.location='Alteracao_Anunciantes.php?acao=editar'</script>"; }
else {
	  list($id, $nome, $logotipo) = mysql_fetch_row($busca)
	 
?>
<form action="?acao=altera&id=<?=$id;?>" enctype="multipart/form-data" name="form" method="post" id="form">
<table width="100%"  border="0" cellspacing="0" cellpadding="0">
  <tr>
	<td colspan="2" align="center">Alteração do Logotipo</td>
  </tr>
  <tr>
	<td width="25%">Anunciante:</td>
	<td width="75%"><label><?=$nome;?></label></td>
  </tr>
  <tr>
	<td>Logotipo:</td>
	<td>
	<input  type="file" name="logomarca"  id="arq"  style="width:200px" value="" 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 1,5mb, 1000px de tamanho ou largura</font>
	</td>
  </tr>
  <tr>
	<td colspan="2" align="center">
	<input type="submit" value="Enviar">
	<input type="reset"  value="Limpar Campos"> </td>
	</td>
  </tr>
</table>
</form>
<?	 }
			}
?>

validaimagem.js

function validaimagem() {
var extensoesOk = ",.gif,.jpg,.jpeg,.png,.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 > 1000)
{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 > 100 || altura > 100 )
  {alert("A imagem é "+largura+"x"+altura+" está fora do padrão requerido");java script:location.reload()}
					   }

bloqueios.js

function BloqueiaLetras()
{
  //Bloqueia Letras
  var tecla = window.event.keyCode;
  tecla	 = String.fromCharCode(tecla);
  if(!((tecla >= "0") && (tecla <= "9")))
   {
	 window.event.keyCode = 0;
   }
}

function verifica()
{
var Msg = "Deseja alterar a condição de bloqueio do anunciante?";
return confirm(Msg);
}

function imagem_vazia()
{
if (!confirm("Você não ecsolheu nenhuma imagem!\nDeseja enviar valor vazio para o banco?")){
document.location='Alteracao_Anunciantes.php?acao=editar'; 
											  }
}

function verificausuario()
{
var Msg = "Deseja alterar a condição de bloqueio do administrador?";
return confirm(Msg);
}

function excluiemail()
{
var Msg = "Deseja excluir o email?";
return confirm(Msg);
}

Compartilhar este post


Link para o post
Compartilhar em outros sites

bem quanto ao que disse que o script aceita imagens com mais de 800*600 e verdade, mas repare que o sistema automaticamente a elimina se exceder os tais 800*600 pode ver isso pela mensagem que surge e ate na pasta upload pode confirmar que a imagem se for maior nao e mantida na pasta. Depois nao existe outra maneira de o fazer senao esta pk ao executar no servidor nao tem outra solucao repare que eu nos inicios dos posts fiz um script basedo so em js mas em servidor nao funciona.

 

 

tentei criar o script e ele funciona nao a 100% mas em servidor e impossivel o php recolher o comprimento e a largura so com js e depois o php so consegue escrever a imagem no fim de fazer o upload.

 

Depois se existe problema em mandar o caminho para a bd isso nao e problema so basta na pagina de upload coloca um echo de uma input como o caminho da imagem

 

 

Mais nao poderia fazer! Abraco

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.