file size validation conflict in form

Question

This code has verified height, width and file format. How to add file size validation on my source code? and this code not working when I use in form. Thanks!

$(function() {
  $("#upload").bind("click", function() {
    //Get reference of FileUpload.
    var fileUpload = $("#fileUpload")[0];

    //Check whether the file is valid Image.
    var regex = new RegExp("([a-zA-Z0-9\s_\\.\-:])+(.jpg|.png|.gif)$");
    if (regex.test(fileUpload.value.toLowerCase())) {
      //Check whether HTML5 is supported.
      if (typeof(fileUpload.files) != "undefined") {
        //Initiate the FileReader object.
        var reader = new FileReader();
        //Read the contents of Image File.
        reader.readAsDataURL(fileUpload.files[0]);
        reader.onload = function(e) {
          //Initiate the JavaScript Image object.
          var image = new Image();
          //Set the Base64 string return from FileReader as source.
          image.src = e.target.result;
          image.onload = function() {
            //Determine the Height and Width.
            var height = this.height;
            var width = this.width;
            if (height > 100 || width > 100) {
              alert("Height and Width must not exceed 100px.");
              return false;
            }
            alert("Uploaded image has valid Height and Width.");
            return true;
          };
        }
      } else {
        alert("This browser does not support HTML5.");
        return false;
      }
    } else {
      alert("Please select a valid Image file.");
      return false;
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="file" id="fileUpload" />
  <input id="upload" type="submit" value="Upload" />
</form>

https://jsfiddle.net/Sakib00123/veakomn3/3/

score 0 · Answer 1 · answered Jun 21 '17 at 09:29

function bytesToSize(bytes) {
   var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
   if (bytes == 0) return '0 Byte';
   var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
   return Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[i];
};
$(function() {
  $("#upload").bind("click", function() {
    //Get reference of FileUpload.
    var fileUpload = $("#fileUpload")[0];
    alert(bytesToSize(fileUpload.files[0].size));

    //Check whether the file is valid Image.
    var regex = new RegExp("([a-zA-Z0-9\s_\\.\-:])+(.jpg|.png|.gif)$");
    if (regex.test(fileUpload.value.toLowerCase())) {
      //Check whether HTML5 is supported.
      if (typeof(fileUpload.files) != "undefined") {
        //Initiate the FileReader object.
        var reader = new FileReader();
        //Read the contents of Image File.
        reader.readAsDataURL(fileUpload.files[0]);
        reader.onload = function(e) {
          //Initiate the JavaScript Image object.
          var image = new Image();
          //Set the Base64 string return from FileReader as source.
          image.src = e.target.result;
          image.onload = function() {
            //Determine the Height and Width.
            var height = this.height;
            var width = this.width;
            if (height > 100 || width > 100) {
              alert("Height and Width must not exceed 100px.");
              return false;
            }
            alert("Uploaded image has valid Height and Width.");
            return true;
          };
        }
      } else {
        alert("This browser does not support HTML5.");
        return false;
      }
    } else {
      alert("Please select a valid Image file.");
      return false;
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="file" id="fileUpload" />
  <input id="upload" type="submit" value="Upload" />
</form>

Here you can go with size. Please check it, It may helps you :)

file size validation conflict in form

1 Answers1