How to Validate size and Dimension of Multiple Image Files

Question

Here I have my coding

<table style="width:100%" border="1">

                             <thead><tr><td colspan="2"> <input class="form-control ImageClass" placeholder="" name="imageurl[]" accept="image/*" id="imagedurl" type="file" onchange="ImageValidation()"   value=""></td></tr></thead>
                             <tbody id="MultiImg"></tbody>
                             <tfoot><tr><td style="text-align:right" colspan="2"> <input type="button"  onclick="Addrow()" name="buttonSubmit" value="Add More" class="btn btn-success" /></td></tr></tfoot>

                              </table>

Once Click in the Add more button I will insert a new input field to upload a new file .here i nee dto validate all the files size and dimension , and my js is below

  $("#imageurl").change(function(){
  //    alert(this.files[0].size);
   var FileSize = this.files[0].size/ 1024 / 1024; // in MB
   //alert(FileSize);
      if (FileSize > 1) {
          alert('File size exceeds 1 MB');
          document.getElementById("imageurl").value="";
          return false
         // $(file).val(''); //for clearing with Jquery
      } 
      // alert(this.width + " " + this.height);
  readURL(this);
    }); 

    var _URL = window.URL || window.webkitURL;
    $("#imageurl").change(function (e) {
  var file, img;
  if ((file = this.files[0])) {
      img = new Image();
      img.onload = function () {
          wth=this.width;
          hit=this.height;
          if(wth > 1200 || hit>600){
              alert('File Dimension Should Not Exceed 1200X600');
              document.getElementById("imageurl").value="";

              $('#imgdiv').attr('src', '');

              return false;

          }
      };
      img.src = _URL.createObjectURL(file);
  }
    });

Below is my Code to generate the input fields

 function Addrow(){
  var table = document.getElementById("MultiImg");
 var x = document.getElementById("MultiImg").rows.length;
 var row = table.insertRow(x);
 var cell1 = row.insertCell(0);
 cell1.innerHTML = '<input class="form-control ImageClass" placeholder="" name="imageurl[]" id="imagedurl" accept="image/*"  type="file"   value="">';
 var cell2 = row.insertCell(1);
 cell2.innerHTML = '<input type="button" value="Delete" class="btn btn-success" onclick="deleteRow(this)"/>';
                              }

I have Done this for multiple images in javascript, But this not working

function ImageValidation(){
var fi = document.getElementsByClassName('ImageClass'); 
    if (fi.length > 0) {
        for (var i = 0; i <= fi.length; i++) {
          alert(fi.files[i].size);
            var fsize = fi.files.item(i).size;      // THE SIZE OF THE FILE.
           alert(fsize);
        }
    }
                              }

yes i need to validate all the files size and dimension, i have given by code but its not working — Brindha Baskaran, Dec 12 '18 at 06:15
you should to include the behavior you're seeing vs. the behavior you want if you want a good answer. — robinsax, Dec 12 '18 at 06:24
Do you want to upload multiple images at once using single file input or you want to upload multiple images using different file inputs for each images? — Ropali Munshi, Dec 12 '18 at 06:26
i use different file inputs to upload multiple image @RopAliMunshi — Brindha Baskaran, Dec 12 '18 at 06:30
Where is the code that you are using to dynamically generate the file input? — Ropali Munshi, Dec 12 '18 at 06:36
`id="imagedurl"` = IDs must be unique. So `$("#imagedurl")` always gives you the first image only. Also `$("#imageurl").change` will only bind to the element that exists when it is called, any newly added elements will not have an event. — freedomn-m, Dec 12 '18 at 06:47
"Not working" **is too vague** - is it not calling the event (most likely)? - is it giving the wrong element? Is it making your monitor explode? It the calculation failing? See: https://idownvotedbecau.se/itsnotworking/ — freedomn-m, Dec 12 '18 at 06:48
Possible duplicate of [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — freedomn-m, Dec 12 '18 at 06:49

score 0 · Answer 1 · answered Dec 12 '18 at 06:19

0

Your code:

wth=this.width;

should probably be changed to:

wth=img.width; \\do the same for height to

As the this object has no access to the img properties

Without knowing the actual error this was the first thing i saw that may cause some issues

answered Dec 12 '18 at 06:19

Dosisod

307
2
15

while using 'this' is always dangerous, it will work in this case – robinsax Dec 12 '18 at 06:23
Yeah, im used to seeing code like this in classes which have stricter scopes, im kinda just shooting in the dark, i still dont know what the __real__ issue is – Dosisod Dec 12 '18 at 06:30

How to Validate size and Dimension of Multiple Image Files

1 Answers1