Jump to content
ment0r

Validar extensão de imagem

Recommended Posts

Boa noite minha gente, tudo bem com vocês?

 

Eu estou fazendo um formulário simples que carrega uma imagem, um título e um texto. Queria que quando a imagem fosse carregada uma função JavaScript validasse sua extensão, só permitindo .jpg, .jpeg, .gif, .bmp e .png e só liberasse o botão Cadastrar quando uma dessas 5 opções fossem escolhidas (ou não, só exibindo que a extensão não está correta e não permitir o carregamento já está ótimo).

 

Tenho esse código abaixo (que peguei na internet), mas não sei como chamá-lo, uma vez que eu tenho duas etapas:

1) Clicar no botão Browse - pra escolher a imagem.

2) Escolher a imagem e clicar em Abrir.

 

Com onclick no <input type="file"> não deu... Enfim, se alguém puder me ajudar, eu ficarei muito agradecido.

 

Um grande abraço a todos.

 

if (document.getElementById('file').value == "") {
			formfotos.botao.disabled = true;
			formfotos.botao.value = 'Selecione a foto';
	}else {
		caminho = document.getElementById('file').value;
		var extensao;
		extensao = caminho.split("/");
		extensao = extensao[ (extensao.length-1) ].split(".");
		extensao = extensao[ (extensao.length-1) ];
		if (extensao != "jpg" && extensao != "gif" && extensao != "bmp") {
			formfotos.botao.disabled = true;
			formfotos.botao.value = 'Escolha a foto';
		}else {
			formfotos.botao.disabled = false;
			formfotos.botao.value = 'Enviar foto';
		}
	}

 

Share this post


Link to post
Share on other sites

Nesse caso o onclick não adianta pois esse evento pega  ação do click, o que temos de fazer é detectar se o input foi alterado.

document.getElementById('file').addEventListener('change', function (e) {
    e.preventDefault();
    var file = e.target.files[0]; // Obtemos o arquivo anexo ao input
    var ext = (file.name).substr((file.name).lastIndexOf('.') + 1); // pegamos o restante do nome do arquivo a partirr da última ocorrencia do ponto
    if (ext == 'jpg' || ext == 'JPG' || ext == 'jpeg' || ext == 'JPEG'
            || ext == 'gif' || ext == 'GIF'
            || ext == 'bmp' || ext == 'BMP'
            || ext == 'png' || ext == 'PNG' || ext == 'x-png') {
       // Liberar qualquer ação aqui pois é uma imagem e do formato aceito
    } 
}, false);

 

Não entrei em detalhes sobre a ação a se tomar caso a imagem seja aceita, porque não sei qual resultado final que deseja.

Minha sugestão é que o botão para submeter o formulário não exita, e seja criado dinamicamente quando a função permitir a imagem.

 

Lembrando que você já pode restringir qual arquivo é permitido selecionar já no input.

<input type="file" accept=".jpg, .jpeg, .png, .gif, .bmp" />

Não se esqueça de validar a extensão também no servidor, tanto html como javascript pode ser alterado pelo usuário.

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Pitag346
      Olá pessoal, tudo bem? 
      Estou com uma dúvida bem bobinha... mas gostaria que me ajudassem a solucionar.
       
      Alguns sites utilizam uma forma de carregar as imagens deixando elas embaçadas/desfocadas. Até que são carregadas e elas aparecerem normalmente...
       
      Exemplo básico seria esse site: https://www.redbull.com/br-pt/athletes
       
      Sabem me explicar como isso é feito, e pra que ? Meu site usa bastante imagens, gostaria de saber se tem algum benefício ou se seria somente estética ... Obrigado! 
       
      (Não sei se isso é feito em JavaScript, acredito que sim... perdão se publiquei na área errada).
    • By Ana Gauna
      Eu já tentei diversas vezes, mas ainda não consegui fazer funcionar.  Inclusive já alterei o arquivo .htaccess mas isso não funcionou.  Estou tentando criar um bloqueio em página de site online, para bloquear o download de imagens, bloquear o download de fotografias.  Estou tentando também criar o bloqueio de impressão da tela de um site, para fazer o control p parar de funcionar em determinada página do site.    Vi na internet sites que tem isso funcionando direito.  Eu ainda não consegui criar.  Alguém sabe como fazer?   Eu sei um pouco de PHP, este mês comprei 3 livros novos de PHP que estou estudando para tentar me ajudar nas minhas dúvidas...
      Boa noite
    • By Artur Mendonça
      Olá amigos,
      tenho um sistema para registar fotos e fazer o upload das mesmas com o seguinte código
      <?php ini_set('display_errors',1); ini_set('display_startup_erros',1); error_reporting(E_ALL); session_start(); include_once("../../conexao.php"); //$titulo_artigo = $_POST['titulo_artigo']; //$nome $imagem2 = $_FILES['imagem']['name']; //$foto $imagem = $_FILES['imagem']; $adate = date('Y-m-d H:i:s'); $status ='process'; $albumid = $_REQUEST['id']; $pasta ='../../fotos/'; $resulta=mysqli_query($conectar,"SELECT * FROM tbl_album WHERE albumid='$albumid'"); $linhas = mysqli_fetch_assoc($resulta); $local= $linhas["local"]; $numfile = count(array_filter($imagem['name'])); $msg = array(); $errormsg = array( 1=> 'O arquivo é maior que o limite', 2=> 'O arquivo ultrapassa o limite de tamanho', 3=> 'O upload do arquivo foi feito parcialmente', 4=> 'Não feito o upload do arquivo' ); for($i = 0; $i < $numfile; $i++){ $name = $imagem['name'][$i]; $type = $imagem['type'][$i]; $size = $imagem['size'][$i]; $error = $imagem['error'][$i]; $tmp = $imagem['tmp_name'][$i]; $imagem2 = $_FILES['imagem']['name'][$i]; $extensao = @end(explode('.',$name)); //var_dump($nomefoto); //Validar extensão da imagem switch($type): case 'image/jpeg'; case 'image/pjpeg'; //Criar a imagem temporaria a ser manipulada ini_set('memory_limit', '-1'); $imagem_teporaria = imagecreatefromjpeg($tmp); break; case 'image/png'; case 'image/x-png'; //Criar a imagem temporaria a ser manipulada ini_set('memory_limit', '-1'); $imagem_teporaria = imagecreatefrompng($tmp); break; default: $_SESSION['msg'] = "<h3 style='color: red;'>Extensão ou tamanho da imagem inválida. A extensão deve ser JPG ou PNG e o tamanho máximo de 5mb</h3>"; //header("Location: ../addgimages2.php"); endswitch; //Importar a logo if ($local=='1'){ $logo = imagecreatefromgif("../../img/festivallogo.gif"); } else { $logo = imagecreatefromgif("../../img/logotipo.gif"); } //Obter a largura da logo $largura_logo = imagesx($logo); //Obter a altura da logo $altura_logo = imagesy($logo); //echo "$altura_logo - $largura_logo"; //Calcular posição x sendo 10px da lateral direita $x_logo = imagesx($imagem_teporaria) - $largura_logo - 10; //Calcular posição y sendo 10px do rodape $y_logo = imagesy($imagem_teporaria) - $altura_logo - 10; imagecopymerge($imagem_teporaria, $logo, $x_logo, $y_logo, 0, 0, $largura_logo, $altura_logo, 70); $imagemnome= time()."-".rand(). "-" .$imagem2; imagejpeg($imagem_teporaria, $pasta. $imagemnome); $query = mysqli_query($conectar,"INSERT INTO tbl_gallery ( aid, gimages, date, status) VALUES ('$albumid','$imagemnome', '$adate', '$status')") or die(mysqli_error($conectar)); } echo " <META HTTP-EQUIV=REFRESH CONTENT = '0;URL=http://www.gfmonteverde.com/administrar/addgallery.php''> <script type=\"text/javascript\"> alert(\"imagens guardadas com sucesso.\"); </script> "; } ?> Este foi um código que encontrei na internet, mas já não lembro onde foi...
      O código funciona perfeitamente.
       
      Acontece que no pc tenho algumas fotos que estão na vertical, quando vejo no pc fica tudo bem, mas quando faço o upload as mesmas ficam na horizontal.

      Já tentei diversas formas, mas todas sem sucesso, até com o exif_read_data....
       
    • By Lmdpires
      Olá,
      Estou a tentar colocar uma imagem com o texto ao lado a contornar a imagem, vi aqui um código Style= "float:right;" e realmente na programação fica tudo bem, mas depois quando abro o website já não fica com essa configuração.
      envio um anexo como fica quando está no lado do programador e depois como fica no website.
       
      Código:
       
      <div>
        <figure>
          <img style="float:left" src="/hc/article_attachments/360003489818/bola-futebol-vinil.jpg" alt="bola-futebol-vinil.jpg" width="265" height="199">
        </figure>
        <span style="color:#e6e6e6">1 - Todos os mercados (excepto: intervalo, mercados de primeira parte, prolongamento e penaltis) são baseados no tempo regulamentar a menos que o contrário seja especificado. Isto inclui qualquer tempo de compensação, mas não inclui prolongamento ou desempate por grandes penalidades.</span>
        <p>
          <span class="wysiwyg-color-black10">2 - Se o mercado permanecer aberto quando já tiverem ocorrido: golos, cartões vermelhos ou amarelo-vermelhos, grandes penalidades ou uma intervenção por parte do VAR (mesmo que o jogo continue a decorrer durante essa intervenção), reservamos o direito de anular as apostas.</span>
        </p>
        <p>
          <span style="color:#e6e6e6">3 - Qualquer jogo interrompido antes do final do tempo regulamentar e não retomado em 24 horas é considerado nulo, independentemente de qualquer decisão judicial sobre este jogo. As apostas, cujo resultado já se encontrar claramente definido no momento da interrupção, permanecem válidas e serão resolvidas de acordo com estas Regras. Nas restantes apostas, caso seja uma aposta simples, o valor apostado é devolvido, caso seja uma aposta múltipla, a aposta continua com as restantes selecções, passando a odd do jogo em causa a odd nula (1.00). </span>
        </p>
        <p>
          <span style="color:#e6e6e6">4 - Se os nomes, ligas ou categorias da equipa forem exibidos incorrectamente, reservamos o direito de anular as apostas.</span>
        </p>
      </div>
       
      Será que me podem ajudar?
       
       


    • By mancialeo_geo
      Olá pessoal! Trabalho com mapas no qgis e finalizo os layouts no corel, faço omapeamento das areas com vants, mas me aconteceude não mapear toda area tive que completar com imagem de satelite, finalizo ele no qgis exporto como pdf, em programas para abrir pdfs ele abre normal, quando abro o pdf no corel ele coe umapartes das imagens transformando elas em png, como resolvo isso é problema no qgis ou no corel?
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.