Jump to content

Archived

This topic is now archived and is closed to further replies.

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

  • Similar Content

    • By clayton.lima2020
      Boa Tarde!
       
      Pessoal estou com um problema para resolver:
       
      Tenho um uma string que é um Nome:  SYLVIA
       
      Eu preciso fazer uma uma busca nessa string achar a letra Y e depois verificar se após a letra Y a próxima letra é Vogal ou Consoante.
       
      No caso do nome SYLVIA a próxima letra é L então retorna Consoante.
       
      Alguém sabe montar esse algoritmo ai?
    • By LucasLV
      Olá.
      Tenho um site onde as imagens são geradas através de um arquivo PHP - utilizo esse método para retornar imagens webp ou jpg - e vi que o navegador não utiliza, ou não salva em cache, as imagens geradas dessa forma.
      Já as onde informo o caminho completo da imagem com a extensão, aparecem como utilizadas do cache.

      Esse comportamento é normal quando as imagens são geradas desse jeito ou é por não ter feito nenhuma configuração de cache no arquivo PHP que gera as imagens?
       
      Coloquei uma imagem do resultado exibido no navegador.

    • By Wallcrawler
      Olá pessoal tudo bem? Estou tentando fazer a cópia de uma imagem que está disponível na web e salvar em uma pasta no meu projeto. Essa imagem está sob protocolo SSL mas navegador consegue acessá-la normalmente. Mas o meu script php é bloqueado, e não entendo o porquê.
       
      Segue o código que estou usando:
      <?php //error_reporting(E_ALL ^ E_DEPRECATED); //ini_set('display_errors', 1); //die('Script travado!'); $start = microtime(true); set_time_limit(0); function save_image($inPath,$outPath) { //Download images from remote server $in = fopen($inPath, 'rb'); $out = fopen($outPath, 'wb'); while ($chunk = fread($in,8192)) { fwrite($out, $chunk, 8192); } fclose($in); fclose($out); } include_once ($_SERVER['DOCUMENT_ROOT'] . '/grpi/include/classes/Rpi.class.php'); include_once ($_SERVER['DOCUMENT_ROOT'] . '/grpi/include/functions.class.php'); $func = new FuncoesAuxiliares(); $rpi = new Rpi(); if(!isset($_GET['num_processo'])) { $rows = $rpi->Consulta('select num_processo, classe, especificacao from processos order by num_processo ASC limit 1'); } else { $rows = $rpi->Consulta("select num_processo, classe, especificacao from processos where num_processo > '" . $_GET['num_processo'] . "' order by num_processo ASC limit 1"); } $registros = 0; $arrayInsert = array(); $qtd_caracteres_total = 14; foreach ($rows as $rs) { //$rs['num_processo'] $zeros = ''; $qtd_char_processo = strlen($rs['num_processo']); //Fill zeros for($i=0; $i < ($qtd_caracteres_total - $qtd_char_processo); $i++) { $zeros .= '0'; } echo('BR5' . $zeros . $rs['num_processo'] . '<br>'); $url = 'http://www.tmdn.org/tmview/trademark/image/BR5' . $zeros . $rs['num_processo']; //Aqui tento acessar a imagem e salvar na pasta correspondente save_image($url, __DIR__ .'/logo/' . $rs['num_processo'] . '.jpg'); //copy('https://www.tmdn.org/tmview/trademark/image/BR5' . $zeros . $rs['num_processo'], __DIR__ .'/logo/' . $rs['num_processo'] . '.jpg'); $processo = $rs['num_processo']; $registros++; } $registros = number_format($registros, 0, ',', '.'); // Display Script End time $time_end = microtime(true); //dividing with 60 will give the execution time in minutes other wise seconds $execution_time = ($time_end - $start)/60; //execution time of the script echo '<b>Total Execution Time:</b> '. $execution_time .' Mins <hr><br><br>Registros: ' . $registros . '<br><br>'; echo("<a href='down_logo.php?num_processo=" . $processo ."' target='_self'>Próxima página</a><br><br>"); ?> O erro retornado é o seguinte:
       
      Warning: fopen(): SSL: Connection reset by peer in /home/storage/8/23/2c/euregistrogrpi/public_html/grpiv2/rpi/down_logo.php on line 10

      Warning: fopen(http://www.tmdn.org/tmview/trademark/image/BR500000825642590): failed to open stream: HTTP request failed! in /home/storage/8/23/2c/euregistrogrpi/public_html/grpiv2/rpi/down_logo.php on line 10

      Warning: fread() expects parameter 1 to be resource, boolean given in /home/storage/8/23/2c/euregistrogrpi/public_html/grpiv2/rpi/down_logo.php on line 12

      Warning: fclose() expects parameter 1 to be resource, boolean given in /home/storage/8/23/2c/euregistrogrpi/public_html/grpiv2/rpi/down_logo.php on line 16
       
      Só que se você tentar acessar o endereço no browser, diretamente, a imagem aparece:
       
      https://www.tmdn.org/tmview/trademark/image/BR500000825642590 
       
      Onde posso estar errando? Obrigado pela atenção de todos.
    • By marsolim
      e aí galera... então tô querendo fazer um sistema de validar a senha por um código enviado pro email da criatura na hora de fazer o cadastro. tive duas ideias aqui...
       
      1. criar um campo na tabela de usuarios mesmo vamos dizer de nome status onde na hora do cadastro mete lá o código gerado randomicamente e manda o email pra pessoa e aí a pessoa insere o código recebido no email e bota ele num campo de formulário pra enviar pro sistema e então vai e bota confirmado no lugar do código na tabela e a partir daí, uma vez que foi confirmado entra normalmente.
       
      2. criar uma tabela com o id da criatura e o o código e então a pessoa insere o código e aí bota confirmado ou exclui a linha já que ela pode não ser necessária pois nesse caso a ideia é se tem a linha é porque ainda não confirmou e se não tem é porque já confirmou.
       
      ora pois eu cá acho que a primeira ideia é mais pratica porque não precisa de duas querys ou join pra fazer isso o que poupa recurso do sistema mas vocês faz de forma diferente? tem alguma outra técnica mais eficaz e própria pra isso?
       
      agradecido.
    • 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();  
×

Important Information

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