1

Estou tentando fazer uma validação simples na extensão das imagens que vão ocorrer o upload, porém não está dando muito certo até o momento, poderiam me ajudar?

Segue o código que estou tentando fazer funcionar.

var aoptionFoto = document.getElementById("optionsFotoImg").value;
var aopcDemaisTemFoto = ['Sim', 'Não'];
var ainput13 = document.getElementById("OutroTipoImagemFile").value == "";
var validaExt = ['jpg', 'png','gif', 'jpeg'];
var extImagem = ainput13.charAt(ainput13.length-3);

if(aoptionFoto == 'Sim' && ainput13 == true){
      swal({
        title: "Ops.. Algo está errado !",
        text: "Para finalizar a compra é necessario fazer o upload da imagem.",
        button: "Continuar",
      });
      document.formMonteCaixa.OutroTipoImagemFile[0].focus();

    }else if(aoptionFoto == 'Sim' && ainput13 == false && extImagem != validaExt){
      swal({
        title: "Ops.. Algo está errado !",
        text: "Para finalizar a compra é necessario fazer o upload da imagem com extensões valida.",
        button: "Continuar",
      });
      document.formMonteCaixa.OutroTipoImagemFile[0].focus();

  }else{
    document.getElementById('BlocoDeEnvioEmailPag').style.display = 'block';
  }

<p>Faça o upload da imagem</p>
            <input name="OutroTipoImagemFile" id="OutroTipoImagemFile" accept="image/*" type="file">

O erro que retorna no console é esse:

Uncaught TypeError: ainput13.charAt is not a function at FinalizarCompra ((index):407) at HTMLButtonElement.onclick ((index):753)

1
  • Tem erro no código.
    – Sam
    Commented 14/06/2018 às 7:31

1 Resposta 1

1

Você está comparando valores errados. O charAt também está pegando apenas 1 caractere na string. Faça o seguinte, use split e .pop() para pegar a extensão (o split quebra o nome do arquivo em array e o pop() pega o valor do último index da array, que é justamente a extensão):

var ainput = document.getElementById("OutroTipoImagemFile").value;
var ainput13 = ainput == "";
var validaExt = ['jpg', 'png','gif', 'jpeg'];
var extImagem = ainput.split(".").pop().toLowerCase();

E aqui:

}else if(aoptionFoto == 'Sim' && ainput13 == false && extImagem != validaExt){

Você altera para:

}else if(aoptionFoto == 'Sim' && ainput13 == false && !~validaExt.indexOf(extImagem)){

Para verificar se a extensão existe na array.

Código completo:

var aoptionFoto = document.getElementById("optionsFotoImg").value;
var aopcDemaisTemFoto = ['Sim', 'Não'];
var ainput = document.getElementById("OutroTipoImagemFile").value;
var ainput13 = ainput == "";
var validaExt = ['jpg', 'png','gif', 'jpeg'];
var extImagem = ainput.split(".").pop().toLowerCase();

if(aoptionFoto == 'Sim' && ainput13 == true){
      swal({
        title: "Ops.. Algo está errado !",
        text: "Para finalizar a compra é necessario fazer o upload da imagem.",
        button: "Continuar",
      });
      document.formMonteCaixa.OutroTipoImagemFile[0].focus();

    }else if(aoptionFoto == 'Sim' && ainput13 == false && !~validaExt.indexOf(extImagem)){
      swal({
        title: "Ops.. Algo está errado !",
        text: "Para finalizar a compra é necessario fazer o upload da imagem com extensões valida.",
        button: "Continuar",
      });
      document.formMonteCaixa.OutroTipoImagemFile[0].focus();

  }else{
    document.getElementById('BlocoDeEnvioEmailPag').style.display = 'block';
  }

<p>Faça o upload da imagem</p>
            <input name="OutroTipoImagemFile" id="OutroTipoImagemFile" accept="image/*" type="file">
2
  • Funcionou, muito obrigado !
    – RonaldoM
    Commented 15/06/2018 às 5:25
  • Corrigi o código porque não estava reconhecendo a extensão jpeg por ter 4 caracteres.
    – Sam
    Commented 15/06/2018 às 6:09

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .