Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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?
Dá uma olhada nessa função que o silverfox postou:
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!!")}function tamanhos() {
var imagem=new Image();
imagem.src=document.form.logomarca.value;if (tamanho_imagem < 0)
{java script:tamanhos()}
else if (tamanho_imagem > 150000)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>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!!")} java script:tamanhos();
}
}
function tamanhos() {
var imagem=new Image();
imagem.src=document.form.logomarca.value;if (tamanho_imagem < 0)
{java script:tamanhos()}
else if (tamanho_imagem > 150000)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"> 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"></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"></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>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!!")}function tamanhos() {
var imagem=new Image();
imagem.src=document.form.logomarca.value;if (tamanho_imagem < 0)
{java script:tamanhos()}
else if (tamanho_imagem > 150000)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>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: 10Eis 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!!")}function tamanhos() {
var imagem=new Image();
imagem.src=document.form.logomarca.value;if (tamanho_imagem < 0)
{java script:tamanhos()}
else if (tamanho_imagem > 150000)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) {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>>";
}
}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">](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;document.getElementById("imagem").innerHTML="Imagem carregada .... <br> <img src='"+x+"' id='importada' onload='java script:escreve(this.width,this.height)' />"
}
function escreve(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>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
?
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
/applications/core/interface/imageproxy/imageproxy.php?img=http://img17.imageshack.us/img17/3318/alerta.jpg&key=a81c929d370f065d14c648357f739fe38102efb19392e34c1b903d6f62259423" alt="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
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?
Mas hein!
ainda não consegui resolver!
veja se isso resolve
http://scriptbrasil.com.br/forum/index.php...mp;#entry499927
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!!")} 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.
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
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!!")} 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>Vamo resolver seu problema. vou tentar fazer o code
Webmind.
Tu é de Portugal cara.
Que legal.
Obrigado pela ajuda.
Fico no aguardo!
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
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>"; }
}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>"; }?>
<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>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!!")}function tamanhos() {
var imagem=new Image();
imagem.src=document.form.logomarca.value;if (tamanho_imagem < 0)
{java script:tamanhos()}
else if (tamanho_imagem > 1000)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()}
}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()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);
}bem quanto ao que disse que o script aceita imagens com mais de 800600 e verdade, mas repare que o sistema automaticamente a elimina se exceder os tais 800600 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
Bem acho que não consegui passar o problema direito:
vampos la:
1) faça uma pagina html simples (só html e javascript).
Ponha nela o código abaixo. Esse script validara a imagem que sera selecionada em um <impu type=file> quanto a peso, dimensoes e extensão. isso no onmChange.
2) salve ela com o nome por exmplo. Pagina.html
3) Esqueçamos que existe php e que iremos fazer upload depois. O lance aqui é só as validações.;
4) Rode a paginma a partir da pasta meus documentos.
Verá que o script validara tudo certinho.
5) joaguea por ftp para um servidor remoto. No caso de você ter um site hospedado ou faço isso atrtavés do apache (ou IIS) instalado na tua maquina local.
Vera que não vai funcionmar.
É esse o meu problema. Eu quero validar a imagem só do lado do browser(cliente).
joguei o arquivo em http://www.carcleo.com/arquivo.html
<html>
<head>
<script>
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!!")}function tamanhos() {
var imagem=new Image();
imagem.src=document.form.logomarca.value;if (tamanho_imagem < 0)
{java script:tamanhos()}
else if (tamanho_imagem > 1000)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()}
}
</script>
</head>
<body>
<form name="form" enctype="multipart/form-data" method="post" action="" 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>ok, entendi, rsrsr
entendeu?
e..
<!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>Documento sem título</title>
<script>
function comprueba_extension(formulario, archivo) {
extensiones_permitidas = new Array(".gif", ".jpg", ".doc", ".pdf");
mierror = "";
if (!archivo) {
mierror = "No has seleccionado ningún archivo";
}else{
//recupero la extensión de este nombre de archivo
extension = (archivo.substring(archivo.lastIndexOf("."))).toLowerCase();
//alert (extension);
//compruebo si la extensión está entre las permitidas
permitida = false;
for (var i = 0; i < extensiones_permitidas.length; i++) {
if (extensiones_permitidas[i] == extension) {
permitida = true;
break;
}
}
if (!permitida) {
mierror = "Comprueba la extensión de los archivos a subir. \nSólo se pueden subir archivos con extensiones: " + extensiones_permitidas.join();
}else{
//submito!
alert ("Todo correcto. Voy a submitir el formulario.");
formulario.submit();
return 1;
}
}
//si estoy aqui es que no se ha podido submitir
alert (mierror);
return 0;
}
</script>
</head>
<body>
<form method=post action="#" enctype="multipart/form-data">
<input type=file name="archivoupload">
<input type=button name="Submit" value="Enviar" onclick="comprueba_extension(this.form, this.form.archivoupload.value)">
</form>
</body>
</html>funcionando perfeito...
no meu caso vai ser automatico quando for alterado o arquivo do input, valida no lado do client com esse javascript, se der tudo ok chama o ajax para validar no lado do servidor, se tudo passar, redimensiona as imagens e tal, grava na pasta e altera no db...
mas para você oq você quer é isso ae, o melhor q achei, claro q ae é a logica.. no meu site não vou colocar os alert, mas sim outras funções q mostrem na tela a mensagem digamos em uma div para ficar mais chique... tipo o twitter...
olhando bem eu queria sabe com q eles verificam se a imagem é mais de 700kb antes de enviar... deve se como o amigo falou.. colocando ela em uma div oculta e dae sim pegando os valores..
meio tarde a resposta mas vai ter mais gente q vai precisar....
lembrando q semprem verifique no servidor tbm pq o javascript é facil modificar na pagina.. ja no servidor não...
e outra, essa do javascrip é para mais conforto ao usuario, vai q manda um video de 10 mb e fica esperando, dae depois volta a mensagem dizendo q não é valido... melhor avisar antes né... kkkkkk
Gente!
Ninguem?
:wacko: