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
Em 11/09/2019 at 09:32, Omar~ disse:

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

 Muito obrigado amigo pela ajuda. Eu não sabia desse accept rsrs, já resolve a situação pra mim.

Embora a outra forma seja mais sofisticada, vou ficar com essa mesmo.

 

Muito obrigado mais uma vez.

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 Alberto Nascimento
      Como consigo salvar o "novo nome" da imagem que foi enviada para o servidor por meio de UPLOAD no mesmo registro em que estão sendo salvos os dados do formulário no banco de dados através do PHP.
      Consigo salvar os campos do formulário, mas o nome que é gerado ao enviar a imagem, não estou conseguindo.
       
      <?php include 'conecta_mysql.inc'; if(isset($_FILES['arquivo']['name']) && $_FILES["arquivo"]["error"] == 0) { echo "<center>Você enviou o arquivo: <strong>" . $_FILES['arquivo']['name'] . "</strong><br /></center>"; echo "<center>Seu tamanho é: <strong>" . $_FILES['arquivo']['size'] . "</strong> Bytes<br /><br /></center>"; $arquivo_tmp = $_FILES['arquivo']['tmp_name']; $nome = $_FILES['arquivo']['name']; $extensao = strrchr($nome, '.'); $extensao = strtolower($extensao); if(strstr('.jpg;.jpeg;.gif;.png', $extensao)) { $novoNome = md5(microtime()) . '.' . $extensao; $destino = 'imagens/' . $novoNome; if( @move_uploaded_file( $arquivo_tmp, $destino )) { echo "<br>"; echo "<img src=\"" . $destino . "\" />"; echo "<br>"; } else echo "Erro ao salvar o arquivo. Aparentemente você não tem permissão de escrita.<br />"; } else echo "Você poderá enviar apenas arquivos \"*.jpg;*.jpeg;*.gif;*.png\"<br />"; } else { echo "<center><h1>Você não enviou nenhum arquivo!</h1></center>"; echo "<center><br><h3><a href='javascript:window.history.go(-1)'>Clique aqui para volta.</a></h3></center>"; } $codphoto = $_POST['codphoto']; $nome = $_POST['nome']; $datafotografia = $_POST['datafotografia']; $photography = $_POST['novoNome']; $sql = "INSERT INTO photograph VALUES"; $sql .= "( '$codphoto', '$nome', '$datafotografia', '$photography' )"; if ($conexao->query($sql) === TRUE) { echo "<center> <h2> Obrigado !! Envio realizado com sucesso !! </h2></center>"; echo "<center><br><h3><a href='LINK_SITE'>ENVIAR OUTRA FOTOGRAFIA</a></h3></center>"; } else { echo "Erro: " . $sql . "<br>" . $conexao->error; } $conexao->close();  
    • By cleomarjose
      Estou desenvolvendo uma extensão para chrome que tenho que passar por algumas telas de um site institucional, estou quase no final, mas agora estou desatando alguns nós, um deles é este, preciso clicar nesta tabela com javascript, mas não encontro onde posso dar o click virtual com java, se puderem me ajudar fico muito grato 
      <br><br> <tr onclick="javascript:preencherValoresPesquisaJson($('#idAtributo').val(),'PLANO GRATUITO',{'codigoClausulaServico':'577'});" onmouseover="$('.tabela-enderecos tr td').removeClass('row-preselected');$('.tabela-enderecos tr').mouseout();$(this).addClass('row-preselected');$(this).find('a').css('color', '#FFF');" onmouseout="javascript:$(this).removeClass('row-preselected');$(this).find('a').css('color', '#777');" class=""> <td class=""><a href="javascript:preencherValoresPesquisaJson($('#idAtributo').val(),'PLANO GRATUITO',{'codigoClausulaServico':'577'});" class="linkitem" onmouseover="javascript:$(this).css('color', '');" style="color: rgb(119, 119, 119);">PLANO GRATUITO</a></td> </tr>
    • By Kaio Kdesigner
      Oi Pessoal!
       
      Estou editando um tema, e ai as imagens dos thumbsnails estão ficando distorcidas.
       
      Cada categoria tem um tamanho diferente de imagem, mas ai elas ficam destorcidas dentro do tamanho (meio confuso né?)
       
      ta ficando assim: https://screenshot.net/gxvqc9y
       
      Como que faço para colocar a imagem dentro do tamanho, ex: 150x150, sem q ela fique distorcida??
    • By Superwagtel
      Olá Pessoal, estou procurando pela extensão de carrinho de Comparas do Livro: Dreamweaver CS3 - Criação de Sites e Loja Virtual
       
      Ou uma extensão de Carrinho de Compras do Dreamweaver que além de somar os pedidos também calcule o Preço da entrega pelo CEP?
       
      Grato à quem puder me ajudar!
    • By alexdcarvalho
      Como colocar uma imagem no html/css sem que a qualidade dela não decaia? Eu fiz os procedimentos abaixo, achando que a coisa pudesse melhorar, porém a imagem horizontalmente fica esticada, toda a resolução se perde. O que eu quero é justamente fazer com que o width fique completo e o height no 300px, porém com uma qualidade boa.
       
       A resolução original da imagem é de 1920x1279.
       
      .img {     width: 100%;     height: 300px;     background-size: cover;     background-position: center right; }
×

Important Information

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