How to limit the size(kb) of a photo with JS?

Question

I have the following question, it is possible to limit on the client side with JS(or jquery) the size(kb) of the photo?

I would like to limit in 500kb at most using the input type="file"

<input type="file" name="imagem"/>

Answer 1

As an alternative to jQuery mode, it follows a way of doing it using pure Javascript (Vanilla). Remembering that the size is in bytes, that is: 1024 byte = 1 kbyte

var upload = document.getElementById("upload");
upload.addEventListener("change", function(e) {
    var size = upload.files[0].size;
    if(size < 1048576) { //1MB         
      alert('Permitido'); //Abaixo do permitido
    } else {           
      alert('Não permitido'); //Acima do limite
      upload.value = ""; //Limpa o campo          
    }
    e.preventDefault();
});

<input id="upload" type="file" />

Answer 2

View this format with Jquery:

$('#inputFile').bind('change', function(e) {
  var data = e.originalEvent.target.files[0];
  // Exibe o tamanho no console
  console.log(data.size + "is my file's size");
  // Ou faz a validação
  if(data.size > 500 * 1024) {
    // ...
  }
}