Ir para conteúdo

Arquivado

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

Carcleo

validar imagem antes do upload

Por , em Javascript

Recommended Posts

Carcleo    4

Carcleo
Postado

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!!")}
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()}
					   }
</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>

Compartilhar este post

Link para o post
Compartilhar em outros sites

webmind    5

webmind
Postado

ok, entendi, rsrsr

Compartilhar este post

Link para o post
Compartilhar em outros sites

Sander Luís    4

Sander Luís
Postado 

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

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

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

  Aceito