Check file size (all) with Jquey

Question

I have a form that sends an email with an attachment. A client-side validation is required.
It would have to do in the form Submit? type: if the sum of attachment sizes is greater than 5MB does not allow shipping.

HTML:

<form id="formulario" action="~/Gerenciamento/EnvioEmail/EnviaEmail" method="post" enctype="multipart/form-data">
        <label>Destinatario:</label><input type="text" name="destinatario" /><br />
        <label>Assunto:</label><input type="text" name="assunto" /><br />
        <label>Mensagem:</label> <textarea name="mensagem" /></textarea><br />
        <label>Anexo:</label><input name="fileUploader" type="file" multiple id="file"/>
        <button >Enviar</button>
    </form>

In Jquery what I got was to limit the shipping quantity to 5. But I need the sum of the 5 files not exceed 5MB

Jquey:

   $('#file').change(function () {
    FormularioOk = false
    var files = this.files; // SELECIONA OS ARQUIVOS
    var qtde = files.length; // CONTA QUANTOS TEM
    var tamanho = 0;

    if (qtde > 5) { // VERIFICA SE É MAIOR DO QUE 5
        alert("Não é permitido enviar mais do que 5 arquivos.");
        $(this).val("");
        FormularioOk = false;
        return false;
    } else {
        for (i = 0; i < qtde; i++) {
            tamanho += files[i].size;
        }
        console.log(tamanho);
        if (tamanho > 10000) {
            alert("Arquivo acima de 10MB;")
            FormularioOk = false;
            return false;
        } else {
            FormularioOk = true;
        return true;
        }
    }
});

Answer 1

The value in the comparison must be in bytes. In your code, it’s 10000. That is, 10 thousand bytes is equivalent to only 0,01 MB.

I changed the value to 5000000, which amounts to approximately 5MB

   $('#file').change(function () {
    FormularioOk = false
    var files = this.files; // SELECIONA OS ARQUIVOS
    var qtde = files.length; // CONTA QUANTOS TEM
    var tamanho = 0;

    if (qtde > 5) { // VERIFICA SE É MAIOR DO QUE 5
        alert("Não é permitido enviar mais do que 5 arquivos.");
        $(this).val("");
        FormularioOk = false;
        return false;
    } else {
        for (i = 0; i < qtde; i++) {
            tamanho += files[i].size;
        }
        console.log(tamanho);
        if (tamanho > 5000000) {
            alert("Arquivo acima de 5MB;")
            FormularioOk = false;
            return false;
        } else {
            FormularioOk = true;
        return true;
        }
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="formulario" action="~/Gerenciamento/EnvioEmail/EnviaEmail" method="post" enctype="multipart/form-data">
        <label>Destinatario:</label><input type="text" name="destinatario" /><br />
        <label>Assunto:</label><input type="text" name="assunto" /><br />
        <label>Mensagem:</label> <textarea name="mensagem" /></textarea><br />
        <label>Anexo:</label><input name="fileUploader" type="file" multiple id="file"/>
        <button >Enviar</button>
    </form>

Answer 2

For validations on the front with Jquery I came up using lib Jqueyr Validate. A fairly easy-to-use lib. Here’s an example of how to validate up to 200 kb

$(document).ready(function() {
  $.validator.addMethod('filesize', function(value, element, param) {
    var count = 0;
    for (var i = 0; i < element.files.length; i++) {
      count += element.files[i].size;
    }
    return this.optional(element) || (count <= param)
  }, 'O tamanho máxima é de {0} byte');

  $('#form').validate({
    rules: {
      image: {
        required: true,
        extension: "jpg,jpeg",
        filesize: 200000 //max size 200 kb,
      }
    },
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/additional-methods.js"></script>



<form action="#" id="form" class="form-horizontal">
  <div class="form-group">
    <input type="file" name="image" class="form-control" multiple />
    <input type="submit" value="Salvar" />
  </div>
</form>

Answer 3

Pure Javascript

function FileDetails() {

    var fi = document.getElementById('file');

    if (fi.files.length < 6) {
          var fsizet=0; 


        for (var i = 0; i <= fi.files.length - 1; i++) {

            var fsize = fi.files.item(i).size;      // TAMANHO DO ARQUIVO.

            fsizet = fsizet + fsize;      // TOTAL.

        }

        if(fsizet >0 && fsizet<5242880){
             document.getElementById("formulario").submit();  
        }else{
             alert('Total maior que 0 e menor que 5MB');
        }

    }
    else { 
        alert('Maximo de 5 arquivos.');
    }
}

<form id="formulario" method="post" action="~/Gerenciamento/EnvioEmail/EnviaEmail" enctype="multipart/form-data" onsubmit="FileDetails(); return false">
    <label>Destinatario:</label><input type="text" name="destinatario" /><br />
    <label>Assunto:</label><input type="text" name="assunto" /><br />
    <label>Mensagem:</label> <textarea name="mensagem" /></textarea><br />
    <label>Anexo:</label><input name="fileUploader" type="file" multiple id="file"/>
    <button >Enviar</button>
</form>

Answer 4

It follows as it turned out:

$(document).ready(function () {

    var files;

    // Add events
    $('input[name=fileUploader]').on('change', prepareUpload);

    // Grab the files and set them to our variable
    function prepareUpload(event) {
        files = event.target.files;
        console.log("aqui",files);
    }

    $('#Salvar').click(function () {
        if (validaDados()) {

             var erro = "";

            var formID = document.getElementById("formulario");

            // files = this.files; // SELECIONA OS ARQUIVOS
            var qtde = files.length; // CONTA QUANTOS TEM
            var tamanho = 0;

            if (qtde > 5) { // VERIFICA SE É MAIOR DO QUE 5
                alert("Não é permitido enviar mais do que 5 arquivos.");
                return false;
            } else {
                for (i = 0; i < qtde; i++) {
                    tamanho += files[i].size;
                }


                console.log("tamanho:", tamanho)
                if (tamanho > 5000000) {
                    alert("Arquivo acima de uma mega;")
                    return false;
                } else {
                    // SE NÃO FOR MAIS DO QUE 5 ELE CONTINUA.
                    if ($("#destinatario").val() == "") {
                        $("#destinatario").css({ "border-color": "red", "padding": "1px" });
                        $("#errodestinatario").html("E-mail obrigatório!");
                        return false;
                    } else {

                        if (validaEmail($("#destinatario").val())) {
                            $("#destinatario").css({ "border-color": "blue", "padding": "1px" });
                            $("#errodestinatario").html("");
                            $("#formulario").submit();
                        } else {
                            $("#destinatario").css({ "border-color": "red", "padding": "1px" });
                            $("#errodestinatario").html("E-mail Inválido!");
                            return false;
                        }

                    }

                }

            }
        }

    });

    function validaDados() {
        var mensagem = "";

        //validações dos campos
        if ($("#destinatario").val() == null || $("#destinatario").val() == "") {
            $("#destinatario").css({ "border-color": "red", "padding": "1px" });
            $("#errodestinatario").html("E-mail obrigatório!");
            erro = "1";
        } else {
            if (validaEmail($("#destinatario").val())) {
                $("#destinatario").css({ "border-color": "blue", "padding": "1px" });
                $("#errodestinatario").html("");
            } else {
                $("#destinatario").css({ "border-color": "red", "padding": "1px" });
                $("#errodestinatario").html("E-mail Inválido!");
                mensagem = "2";
            }
        }
        if ($("#assunto").val() == "") {
            $("#assunto").css({ "border-color": "red", "padding": "1px" });
            $("#erroassunto").html("Assunto é obrigatório!");
            mensagem = "2";
        } else {
            $("#assunto").css({ "border-color": "blue", "padding": "1px" });
            $("#erroassunto").html("");
        }

        if ($("#mensagem").val() == "") {
            $("#mensagem").css({ "border-color": "red", "padding": "1px" });
            $("#erromensagem").html("Mensagem é obrigatório!");
            mensagem = "2";
        } else {
            $("#mensagem").css({ "border-color": "blue", "padding": "1px" });
            $("#erromensagem").html("");            
        }

        if ($("#fileUploader").val()=="") {
            $("#fileUploader").css({ "border-color": "red", "padding": "1px" });
            $("#errofileUploader").html("Anexo é obrigatório!");
            mensagem = "2";
        } else {
            $("#fileUploader").css({ "border-color": "blue", "padding": "1px" });
            $("#errofileUploader").html("");            
        }

        if (mensagem != "")//se a variavel mensagem tiver  conteudo,ou seja ,se tiver ocorrido ,algum erro no preenchimento
        {
            $("#resposta").addClass("alert alert-danger");
            $('#resposta').html('Verifique os campos pendentes');
            $('#resposta').show(); //MOSTRA A DIV DE RESPOSTA
            return false;

        } else { // se não
            $('#resposta').html('');
            $('#resposta').hide();
            return true;
        }
    }

    function validaEmail(email) {
        var regex = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
        return regex.test(email);
    }
});// fecha $(document).ready JS

html:

 <form class="form-horizontal" id="formulario" name="formulario" action="~/Gerenciamento/EnvioEmail/EnviaEmail" method="post" enctype="multipart/form-data">

        <div class="form-group">
            <label for="inputEmail3" class="col-sm-2 control-label">Destinatario</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="destinatario" name="destinatario" />
                <span class="label label-danger" id="errodestinatario"></span>
            </div>
        </div>
        <div class="form-group">
            <label for="inputEmail3" class="col-sm-2 control-label">Assunto:</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="assunto" name="assunto" />
                <span class="label label-danger" id="erroassunto"></span>
            </div>
        </div>
        <div class="form-group">
            <label for="inputEmail3" class="col-sm-2 control-label">Mensagem</label>
            <div class="col-sm-10">
                <textarea class="form-control" id="mensagem" name="mensagem"></textarea>
                <span class="label label-danger" id="erromensagem"></span>
            </div>
        </div>
        <div class="form-group">
            <label for="inputEmail3" class="col-sm-2 control-label">Anexo</label>
            <div class="col-sm-10">
                <input class="form-control" id="fileUploader" name="fileUploader" type="file" multiple />
                <span class="label label-danger" id="erroarquivo"></span>
            </div>
        </div>
        <div id="resposta" style="display:none;"></div>
        <button type="button" class="btn btn-primary" id="Salvar">Enviar</button>




    </form>