Ir para conteúdo
Fórum Script Brasil
  • 0

Validação De Imagem - Upload


AlexCT

Pergunta

Estou precisando de tratamento e limitação de upload

(onde vejo muita gente querendo a validação completa)

já procurei muito e acabei achando este 3 script's. Como não sei mexer muito bem em javascript, estou precisando dessa ajuda

Querendo Juntar os 3 scripts

Pois tenho um upload (asp), e antes de enviar , gostaria que verifica-se

- Tamanho

- Dimensão

- Extensão

Não estão extamente como espero, por isso irei descrever e depois também juntar num só, que para mim seria o mais complexo...

Validação de Tamanho

neste script a pessoa já coloca o nome da imagem, mas a imagem tem que ser a do file do upload, mas não precisa aparecer a mensagem de imagem ok, só mensagem de imagem com tantos Kb.

<script languagae="javascript">
<!--
var imagem=new Image();
imagem.src="imagem.jpg";

if(imagem.fileSize > 15000) {
  window.alert("A imagem é muito pesada...");
}
else {
  window.alert("Blza, a imagem tá ok em termos de peso.");
}
//-->
</script>
Validação de Dimensão Neste script pelo o que precebi recupera a dimensão da imagem, mas seria necessário comparar (if) com uma determinada dimensão, aonde não esta fazendo
<script language="JavaScript">
var largura = document.getElementById("exemplo").width;
var altura = document.getElementById("exemplo").height;
alert ("Dimensões: " + largura + " x " + altura);
</script>
Validação de Extensão este script foi obtido de um upload no post, acho que não tem que ser mudado, só juntar com os demais. mas se precisar e caso este não de certo tenho outro de extensão.
<script type="text/javascript">
function ChecaExtensaoArquivo( formulario ){
  var extensoesOk = ",.gif,.jpg,";
  
  var extensao    = "," + formulario.arquivo.value.substr( formulario.arquivo.value.length - 4 ).toLowerCase() + ",";
  if( extensoesOk.indexOf( extensao ) == -1 ){
      alert( formulario.arquivo.value + "\nnão possui uma extensão válida" );
      return false;

    }
  return true;
}
</script>

Sobre as mensagem de aviso, poderia ser todas numa janela só ou dados no final do script. Para ficar tudo junto..

Link para o comentário
Compartilhar em outros sites

9 respostass a esta questão

Posts Recomendados

  • 0

Eu não entendi direito qual está sendo a sua dúvida... você já tentou juntar essas funções? E outra: não faça essa verificação só com javascript, pois não é difícil de driblá-la! No mínimo, faça uma verificação em ASP de tudo isso: tamanho do arquivo, dimensões da imagem e a extensão.

E quando você for verificar a extensão, não pegue os últimos caracteres do nome do arquivo para testá-la... tb não é seguro! você deve verificar pelo mime-type do arquivo.

Eu sei fazer tudo isso em PHP, mas em ASP... não vou poder ajudá-lo. sad.gif

Link para o comentário
Compartilhar em outros sites

  • 0

Vê se é mais ou menos isso:

<html>
<body>
<form name="formulario">
<p>Escolha a foto:</p>
<p><input type="file" name="procura" size="20"></p>

<script>
function verifica_extencao() {
 var extensoesOk = ",.gif,.jpg,";

 var extensao    = "," + document.formulario.procura.value.substr( document.formulario.procura.value.length - 4 ).toLowerCase() + ",";
 if( extensoesOk.indexOf( extensao ) == -1 )
    { alert( document.formulario.procura.value + "\nNão possui uma extensão válida" )}
else {javascript:tamanhos()}     

}

function tamanhos() {
var imagem=new Image();
imagem.src=document.formulario.procura.value;
tamanho_imagem = imagem.fileSize 
img_tan = tamanho_imagem
if (tamanho_imagem > 15000)
   {alert("O tamanho da Imagem é muito grande!")}
else 
   {javascript:ativafigura()}
}

function ativafigura() {
document.getElementById('foto').innerHTML = "<img border=\"0\" src=\""+document.formulario.procura.value+"\" name=\"img\" style=\"visibility: hidden\" >"
largura = document.getElementById("img").width;
altura = document.getElementById("img").height;
alert("Arquivo de Imagem. \n Dimensões: "+largura+"x"+altura+"\n Tamanho :"+tamanho_imagem)
}

</script>


</form>
<p><a href="javascript:verifica_extencao()">Verificar...</a></p>
<div id="foto"></div>
</body>
</html>

Link para o comentário
Compartilhar em outros sites

  • 0

Fiz os testes mas não deu certo..

eu acabei mexendo e acabei conseguindo uns resultados

vou postar o que consegui e o que esta no campo código, ainda não consegui e neles que preciso a ajuda!!!!!

Agradeço muito quem puder me ajudar!!!!

abaixo código já testado e ok

<script language="JavaScript" type="text/JavaScript">

<!--width="350" height="225"

function MM_jumpMenu(targ,selObj,restore){ //v3.0

eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");

if (restore) selObj.selectedIndex=0;

}

//-->

</script>

<script languagae="javascript">

function valida()

{

//VERIFICA SE FOI SELECIONADO ALGO NO CAMPO SELECT

if (document.form.fid.selectedIndex == 0){

msg ="__________________________\n\n\n" +

"Selecionar o Jogo!" +

"\n\n_________________________" +

"\nwww.jogosescoteiros.cjb.net";

alert(msg);

document.form.fid.focus();

return false;

}

//VERIFICA SE O CAMPO FILE FOI PREENCHIDO

if (document.form.arq.value == ""){

msg ="__________________________\n\n\n" +

"Selecionar a imagem!" +

"\n\n_________________________" +

"\nwww.jogosescoteiros.cjb.net";

alert(msg);

document.form.arq.focus();

return false;

}

//VERIFICA EXTENSÃO DO ARQUIVO

if((document.form.arq.value.lastIndexOf(".jpg")==-1) &&

(document.form.arq.value.lastIndexOf(".gif")==-1) &&

(document.form.arq.value.lastIndexOf(".jpeg")==-1)){

msg ="______________________________________\n\n\n" +

"Este arquivo NÃO possui uma extensão válida!" +

"\n\n Extensões permitidas: .jpg e .gif" +

"\n\n\nSeu arquivo: " + document.form.arq.value +

"\n\n______________________________________" +

"\nwww.jogosescoteiros.cjb.net";

alert(msg);

document.form.arq.focus();

return false;

}

TESTEI ESTA PARTE MAS não DEU CERTO

//VERIFICA TAMANHO DA IMAGEM

	if(document.form.arq.value.filesize > 5000){
	alert("A imagem é muito pesada...");
	document.form.arq.focus();
	return false;
	}




//VERIFICA AS DIMENSÕES DA IMAGEM
var largura = document.form['arq'].width;

var largura = document.form("arq").width;
var altura = document.form("arq").height;
if((largura > 350) && (altura > 225)){
msg = "_____________________________\n" +
"Dimensões: " + largura + px " x " + altura + "px\n\n" +
window.alert(msg);
	//document.form.arq.focus();
    return false;
}

return true;

}

</script>

</head>

<form action="jogoupload_gravar.asp" method="post" enctype="multipart/form-data" name="form" id="form" onsubmit="return valida();">

<select name="fid" class="form2" id="fid">

...

<input name="arq" type="file" class="form2" id="arq" size="45">

</form>

Link para o comentário
Compartilhar em outros sites

  • 0

Olha eu dei uma melhorada no script e coloquei já pra redirecionar pra página que você quer quando submita... Eu testei ele no IE6 e rodou beleza... Copia o código e cola num arquivo novo, sem modificar nada e testa aí...

<html>
<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="arq" size="20" class="form2" id="arq"></p>

<script>
function verifica_extencao() {
var extensoesOk = ",.gif,.jpg,";

var extensao    = "," + document.form.arq.value.substr( document.form.arq.value.length - 4 ).toLowerCase() + ",";
if (document.form.arq.value == "")
   {alert("O campo do endereço da imagem está vazio!!")}
else if( extensoesOk.indexOf( extensao ) == -1 )
   { alert( document.form.arq.value + "\nNão possui uma extensão válida" );javascript:location.reload()}
else {javascript:tamanhos()}     

}

function tamanhos() {
var imagem=new Image();
imagem.src=document.form.arq.value;
tamanho_imagem = imagem.fileSize 
img_tan = tamanho_imagem
if (tamanho_imagem < 0)
   {javascript:tamanhos()}
else if (tamanho_imagem > 15000)
  {alert("O tamanho da Imagem é muito grande ...  "+tamanho_imagem+" Bytes!!");javascript:location.reload()}
else 
  {javascript:ativafigura()}
}

function ativafigura() {
document.getElementById('foto').innerHTML = "<img border=\"0\" src=\""+document.form.arq.value+"\" name=\"img\" style=\"visibility: hidden\" >"
largura = document.getElementById("img").width;
altura = document.getElementById("img").height;
if (largura > 350 || altura > 225 )
    {alert("A imagem é "+largura+"x"+altura+" está fora do padrão requerido");javascript:location.reload()}
else 
{location.href = "jogoupload_gravar.asp"}
}


</script>


</form>
<p><a href="javascript:verifica_extencao()">GRAVAR!!</a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div id="foto"></div>
</body>
</html>

Link para o comentário
Compartilhar em outros sites

  • 0

Antes de mais nada obrigado pela inteção de ajudar renan_doidera

Estou usando o Netscape (porque o IE esta com pau)

Só rodou a parte da extensão

mesmo assim amanha vou testar no ie

mas queria tirar umas duvidas:

para que javascript:tamanhos(), não da para ficar sem?

javascript:location.reload(), para que?

location.href = "jogoupload_gravar.asp", da para ficar sem, ou isso obriga a passar pelo script?

Poxa não sei o que fazer... já tentei varias coisas...

mas obrigado mesmo pela ajuda!!!

Link para o comentário
Compartilhar em outros sites

  • 0

O tamanhos() é para verificar o tamanho da imagem usando aquele pulo-do-gato que um cara do webfórum postou láh e você até deu uma comentada... eu tentei saber o tamanho da imagem de outras formas mas não deu certo aqui infelizmente... sad.gif , no entanto quando rodava esse script, na primeira veficicação ele falava que o tamanho da imagem é -1 !, aí depois quando roda pela segunda vez ele fala o tamanho certo da imagem... não sei bem por que isso aconteceu, pensava que fosse que a variável da localização do arquivo não estivesse recebendo o valor certo, mas testei e usei uns artifícios aqui e ela estava sim, por isso coloquei a verificação :

if (tamanho_imagem < 0)

{javascript:tamanhos()}

Porque eu sabia que se desse -1 ele ia voltar a executar a função e dessa vez ele ia dar o tamanho certo da imagem... por isso é necessário essa função separada.

O locatinon.reload() é para recarregar a página depois de um erro para limpar o campo "file" uma vez que tentei outras formas de limpar ele e não consegui sad.gif , e para descobrir as dimensões da figura eu imprimi uma tag <img> dentro de um div , com estilo "hidden" (escondida) , coloquei essa tag <img> com um id, assim posso descobrir o tamanho dela chamando pelo getElementById, não consegui achar outra forma de fazer isso infelizmente...

E o locatino.href não é obrigatório não ... eu só coloquei porque eu acho que depois que você verificar as propriedades da figura iria querer já ir para outra página pra salvar... Se quiser pode colocar outra coisa alí, um alert sei láh.

Oura coisa, hehe pelo netscape eu realmente esperava que não fosse funcionar mesmo, eu não tenho muita noção de portabilidade, até pelo fato de não possuir um outro navegador além do IE. Sabe eu dei uma olhada, isso é muito mais fácil de se fazer dinamicamente, achei vários scripts que fazem essa verificação pré upload, mas em PHP.

Testa aí no IE pra ver se pelo menos nele roda né, se rodar posso dar uma pesquisada pra colocar pra rodar em outros browseres.

Falows

Link para o comentário
Compartilhar em outros sites

  • 0

Testei aqui no pc do meu irmão e rodou muito bem... perfeito

Mas no netscape não sei porque não roda estranho né!!!

tem como adaptar algo assim?

outra coisa, nãos eria mais logico, deixar ele direto rem chamada de script e rediricionamento, é feito isso para obrigar que segue verificado?

MUITO OBRIGADO TEM SIDO MUITO GENTE BOA

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,3k
×
×
  • Criar Novo...