Limit the Image size in jquery when uploading

Question

I'm using a below script to upload images and it check whether it is valid image or not. If not valid image, then show a alert message to reupload again. It works fine..but How to check the image size also...let's say less then 500 Kb, if user upload image more then 500 Kb...display a same alert message box to upload image less then required size which is 500kb.

Here is my code

$("#fileUpload_one").on('change', function () {
  //Get count of selected files
  var countFiles = $(this)[0].files.length;
  var imgPath = $(this)[0].value;
  var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
  var image_holder = $("#image-holder_one");
  image_holder.empty();
  if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {
    if (typeof (FileReader) != "undefined") {
      //loop for each file selected for uploaded.
      for (var i = 0; i < countFiles; i++) {
        var reader = new FileReader();
        reader.onload = function (e) {
          $("<img />", {
            "src": e.target.result,
            "class": "thumb-image",
            "height": "200px",
            "width": "200px"
          }).appendTo(image_holder);
        }
        image_holder.show();
        reader.readAsDataURL($(this)[0].files[i]);
      }
    } else {
      alert("This browser does not support FileReader.");
    }
  } else {
    alert("Pls select only images");
  }
});

<input id="fileUpload_one" type="file" multiple />
<div id="image-holder_one"></div>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>

Thanks in advance.

Might be a duplication of this question: https://stackoverflow.com/a/3717847/2404452 — blaz, Mar 22 '19 at 04:52
hope this helpefull two you Limit the Image size in jquery when uploading https://phppot.com/jquery/file-size-validation-using-jquery/ — Mohammad Malek, Mar 22 '19 at 05:01
paste this $(".thumb-image").css({ 'width' : '200px', 'height' : '200px' }); after appendTo(image_holder); — Deepak A, Mar 22 '19 at 05:02

score 0 · Answer 1 · answered Mar 22 '19 at 05:03

if (typeof (FileReader) != "undefined") {
      //loop for each file selected for uploaded.
      for (var i = 0; i < countFiles; i++) {
        var reader = new FileReader();
        reader.onload = function (e) {
          $("<img />", {
            "src": e.target.result,
            "class": "thumb-image",
          }).appendTo(image_holder);
          $(".thumb-image").css({'width' : '200px','height' : '200px'});

        }
        image_holder.show();
        reader.readAsDataURL($(this)[0].files[i]);
      }
    }

Limit the Image size in jquery when uploading

1 Answers1