JQuery File Input - Read image width & height

Question

I'm trying to read (input type="file") image file's original width / height. My code gives me "undefined". I suppose because i'm not loading image to server or anywhere.

Here is my code;

<script>
    $( document ).ready(function() {
        
        $('#texture_modal').click(function () {
        
        var texture_name = $('#texture_name').val();
        var thumb_img = $('#thumb_img').val().replace(/^.*\\/, "");
        var big_img = $('#big_img').val().replace(/^.*\\/, "");
        var real_img = $('#real_img').val().replace(/^.*\\/, "");
    var img_size = document.getElementById("real_img").files[0].size / (1024*1024); // Get real_img size in MB
        var texture_size = img_size.toFixed(2); // get rid of decimals in real_img size MB  
        var texture_category = $('#texture_category').val();
        var texture_description = $('#texture_description').val();
        
        // THIS IS THE STUFF WHICH I WANT TO GET IMAGE WIDTH
        var texture_dim = document.getElementById("real_img").naturalWidth;
        console.log(texture_dim);
    
        }); //End click function
        
    });  //End document ready
</script>

And here is my input fields. I have multiple file inputs, whichs are for thumbnail image, big image and real image. I need real image width only, others will be upload to server. Here is my input fields;

<!-- this fields are inside a bootstrap modal -->
<div class="modal-body">
<div class="input-group input-group-sm">
  <div class="input-group-prepend">
    <span class="input-group-text"><small>Texture Name</small></span>
  </div>
  <input type="text" class="form-control" id="texture_name">
</div>    

<div class="form-group pt-1">
    <small>Thumbnail Img(200*200)</small>
    <input type="file" class="form-control form-control-sm" id="thumb_img">
    <small>Big Img(445*445)</small>
    <input type="file" class="form-control form-control-sm" id="big_img">
    
<!-- this one i want to take width without post or upload anywhere -->
<small>Real Img</small>
<input type="file" class="form-control form-control-sm" id="real_img">

<!-- taking categories with php function -->
    <small>Category</small>
    <select id="texture_category" class="form-control form-control-sm">
    <option selected disabled>----- Choose a Category -----</option>
 <?php foreach($texture_categories as $key){?>    
     <option><?php echo $key; ?></option>
<?php } ?>
    </select>
    
    <small>Description :</small>
     <textarea id="texture_description" class="form-control form-control-sm"></textarea>
  </div>
</div>

Answer 1

can you try to assign an Image and get it

var fileUpload=document.getElementById("photoInput");
function Test(){
  var reader = new FileReader();
  reader.readAsDataURL(fileUpload.files[0]);
  reader.onload = function (e) {
    var image = new Image();
    image.src = e.target.result;
    image.onload = function () {
        var width  = this.naturalWidth  || this.width;
        var height = this.naturalHeight || this.height; 
       console.log(height,width)
    }
  };
}

<div class="photo">
    <input type="file" name="photo" id="photoInput" onchange="Test(this)"/>
</div>

in your example

$( document ).ready(function() {
        
       $(".modal").modal()
        
});  
    
function Test(){
  var fileUpload=document.getElementById("thumb_img");
  var reader = new FileReader();
  reader.readAsDataURL(fileUpload.files[0]);
  reader.onload = function (e) {
    var image = new Image();
    image.src = e.target.result;
    image.onload = function () {
        var width  = this.naturalWidth  || this.width;
        var height = this.naturalHeight || this.height; 
       console.log(height,width)
    }
  };
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<!-- this fields are inside a bootstrap modal -->

<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
<div class="input-group input-group-sm">
  <div class="input-group-prepend">
    <span class="input-group-text"><small>Texture Name</small></span>
  </div>
  <input type="text" class="form-control" id="texture_name">
</div>    

<div class="form-group pt-1">
    <small>Thumbnail Img(200*200)</small>
    <input type="file" class="form-control form-control-sm"onchange="Test(this)" id="thumb_img">
    <small>Big Img(445*445)</small>
    <input type="file" class="form-control form-control-sm" id="big_img">
    
<!-- this one i want to take width without post or upload anywhere -->
<small>Real Img</small>
<input type="file" class="form-control form-control-sm" id="real_img">

<!-- taking categories with php function -->
    <small>Category</small>
    <select id="texture_category" class="form-control form-control-sm">
    <option selected disabled>----- Choose a Category -----</option>
 <?php foreach($texture_categories as $key){?>    
     <option><?php echo $key; ?></option>
<?php } ?>
    </select>
    
    <small>Description :</small>
     <textarea id="texture_description" class="form-control form-control-sm"></textarea>
  </div>
</div>
    </div>
  </div>
</div>