0

Possuo o seguinte código no formulário:

   <div class="form-group ">
            <small id="small-alert-pic">Máximo de 7 fotos</small>
            <small id="picture-size"></small>
            <input type="file" name="files[]" class="form-control"
            multiple="multiple" placeholder="" id="picture">
   </div>

Quando realizo a seleção dos arquivos eu tenho a validação de quantidade( que funciona normalmente ):


    $("#picture").on("change", function () {
        if ($("#picture")[0].files.length > 7) {
            $(this).css('boder', '3px solid red');
            $('#small-alert-pic').css('color', 'red')
            $('#small-alert-pic').text('ATENÇÃO! SÃO PERMITIDOS APENAS 7 FOTOS PARA UPLOAD');
        }
    });

porem quando faço a validação do tamanho do arquivo ocorre que apenas valida o primeiro. Se eu seleciono um arquivo de 1kb e um de 19MB( nessa ordem) ele não valida o segundo, porem se seleciono o de 19MB e o de 1KB ele valida normalmente. Segue o código:

 $('#picture').change(function(){
        var isOk = true;
        var maxSize = parseInt(2048, 10)
        $('input[type=file]').each(function () {
            if (typeof this.files[0] !== 'undefined') {
                var size = this.files[0].size;
                console.log(size / 1000 + ' -- ' + maxSize);
                isOk = maxSize > (size / 1000);
                if (!isOk) {
                    $('#picture-size').prev().css({
                        "color": " red"
                    }).text('ATENÇÃO SÃO PERMITIDOS CADA ARQUIVO DEVE POSSUIR APENAS 2MB');
                } else {
                    $(this).prev().css({
                        "border": "none"
                    });
                }
                return isOk;
            }
        });
        return isOk;
    });

Alguém tem ideia do que pode estar ocorrendo?

1 Resposta 1

1

Note que eu inteirei sobre o array de arquivos.

O problema, aparentemente, está aqui: var size = this.files[0].size;.
Veja: com isso, você pega somente o primeiro arquivo.
E você deve validar em todos os arquivos, não somente para o primeiro.

Tenta o seguinte:

$("#picture").on("change", function() {
  if ($("#picture")[0].files.length > 7) {
    $(this).css('boder', '3px solid red');
    $('#small-alert-pic').css('color', 'red')
    $('#small-alert-pic').text('ATENÇÃO! SÃO PERMITIDOS APENAS 7 FOTOS PARA UPLOAD');
  }
});

$('#picture').change(function() {

  //console.clear();

  var isOk = true;

  var maxSize = parseInt(2048, 10);

  $('input[type=file]').each(function() {

    var files = this.files;

    for (let i = 0; i < files.length; i++) {

      if (typeof this.files[i] !== 'undefined') {

        var size = parseInt(this.files[i].size);

        console.log(size);

        console.log(size / 1000 + ' -- ' + maxSize);

        isOk = maxSize > (size / 1000);

        if (!isOk) {
          $('#picture-size').prev().css({
            "color": " red"
          }).text('ATENÇÃO SÃO PERMITIDOS CADA ARQUIVO DEVE POSSUIR APENAS 2MB');
        } else {
          $(this).prev().css({
            "border": "none"
          });
        }
      }

      return isOk;

    }
  });
  return isOk;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group ">
  <small id="small-alert-pic">Máximo de 7 fotos</small>
  <small id="picture-size"></small>
  <input type="file" name="files[]" class="form-control" multiple="multiple" placeholder="" id="picture">
</div>

2
  • O looping funcionou agora, eu tive que realizar umas modificações pois quando é colocado o return dentro do each ele só executa o primeiro. Obrigado. 24/10/2019 às 16:40
  • Na hora, meu amigo. 24/10/2019 às 17:12

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 .