How to limit the user to upload only photos less than 100 KB

Question

I want to have input tag for uploading multiple images.

I have format limitation in preview (called on change trigger) as below. How can I add another limitation for images greater than 100kb?

function previewPhotoInput() {
    var $preview = $('#previewPhoto');
    if (this.files) {
        var files = this.files;
        $.each(files, function (i, file) {
            if (!/\.(jpeg|jpg)$/i.test(file.name)) {
                return alert("Invalid Format!");
            } 
            var reader = new FileReader();
            $(reader).on("load", function () {
                $preview.append($("<img/>", { src: this.result, height: 100 }));
            });
            reader.readAsDataURL(file);
        });
    }
}

score 2 · Answer 1 · edited Nov 08 '17 at 06:32

2

You can use file.size, on the input change event to get the size in bytes. Based on that you could provide an alert regarding the file size:

if(file.size > 100000){
    return alert("file is to big")
}

Demo

function previewPhotoInput(obj) {
  var $preview = $('#previewPhoto');
  if (obj.files) {
    var files = obj.files;
    $.each(files, function(i, file) {
      if (!/\.(jpeg|jpg)$/i.test(file.name)) {
        return alert("Invalid Format!");
      }
      if(file.size > 100000){
        return alert("file is to big")
      }
      var reader = new FileReader();
      $(reader).on("load", function() {
        $preview.append($("<img/>", {
          src: this.result,
          height: 100
        }));
      });
      reader.readAsDataURL(file);
    });
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" multiple onchange="previewPhotoInput(this)">

edited Nov 08 '17 at 06:32

Nisarg Shah

14,151
6
34
55

answered Nov 08 '17 at 06:28

Carsten Løvbo Andersen

26,637
10
47
77

1

Downvote care to explain? – Carsten Løvbo Andersen Nov 08 '17 at 06:29
I guess they didn't like `onchange=` part. I prefer addEventListener personally, but I didn't downvote. – Nisarg Shah Nov 08 '17 at 06:30
1

@NisargShah perhaps but the use of `onchange` is just for the example. Since the op says his code is working i figured it didn't matter much what way i triggered the event. I just wanted to show that the code is working. – Carsten Løvbo Andersen Nov 08 '17 at 06:32

score 0 · Answer 2 · edited Dec 03 '17 at 13:02

0

Add data-max-size="100" in your input tag

  <form  class="upload-form">
        <input id="previewPhoto" class="upload-file" data-max-size="100" type="file" >
        <input type=submit>
    </form>

Jquery invoking function : on submit button this function will be execute. It will get Input tag's max-size attribute value and compare it with Files size value.

$(function(){
    var fileInput = $('#previewPhoto');
    var maxSize = fileInput.data('max-size');
    $('#previewPhoto').submit(function(e){
        if(fileInput.get(0).files.length){
            var fileSize = fileInput.get(0).files[0].size; // in bytes
            if(fileSize>maxSize){
                alert('file size is more then' + maxSize + ' bytes');
                return false;
            }else{
                alert('file size is correct- '+fileSize+' bytes');
            }
        }else{
            alert('choose file, please');
            return false;
        }

    });
});

edited Dec 03 '17 at 13:02

Pedram

15,766
10
44
73

answered Nov 08 '17 at 06:27

Saurin

1,650
1
10
8

2

You should probably add some explanation with the code. – Nisarg Shah Nov 08 '17 at 06:29
1

any reason for downvote ? – Saurin Nov 08 '17 at 06:30
Probably due to Nisarg Shah reason – Pedram Nov 08 '17 at 06:31
1

okay, with respect to his reputation point, I am going to update it. – Saurin Nov 08 '17 at 06:33
1

@Saurin I did not downvote. But your answer is indeed unclear. Also, posting a code-only answer pushes the question to low-quality queue (I think). So avoid such answers in general if you can. – Nisarg Shah Nov 08 '17 at 06:35

score 0 · Accepted Answer · edited Nov 08 '17 at 07:24

Use file.size . You will size in bytes but you can convert to KB.

     function previewPhotoInput() {
            var $preview = $('#previewPhoto');
            if (this.files) {
                var files = this.files;

                $.each(files, function (i, file) {
                       var size=(file.size)/1000;
                       if(size>100){
                          return alert("File should be less than 100K"); 
                       }

                       if (!/\.(jpeg|jpg)$/i.test(file.name)) {
                          return alert("Invalid Format!");
                       } 

                    var reader = new FileReader();
                    $(reader).on("load", function () {
                        $preview.append($("<img/>", { src: this.result, height: 100 }));
                    });
                    reader.readAsDataURL(file);
                });
            }
        }

Thanks, I moved var size = (file.size) / 1000; if (size > 100) { return alert("err msg!"); } in each loop, since I had error on files[0]. please edit your answer. I will accept then. — Elnaz, Nov 08 '17 at 06:38

score 0 · Answer 4 · answered Nov 08 '17 at 06:33

Use following method and call while submitting your input form or while file input control changes

function ValidateImageFile() {
                    var file = $(".fupFileUpload")[0].files[0]; //fupFileUpload add class to your file upload control
                    var fileType = file.type;
                    var ValidImageTypes = ["image/gif", "image/jpeg", "image/png", "image/tiff", , "image/bmp"];
                    if ($.inArray(fileType, ValidImageTypes) < 0) {
                       alert("Please select valid image file."); //set label text if you want to display error message in label
                        return false;
                    }
                    else if( file.size > 1000000){ // file.size is in bytes
                        alert("Please select file less than 100 kb.");
                        return false;
                    }
                    return true;
                }

How to limit the user to upload only photos less than 100 KB

4 Answers4