Validar extensão de imagem

[ment0r 1]

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';
		}
	}

 

[Omar~ 87]

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.

 

[ment0r 1]

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.