Manage the dimensions of elements using Javascript on the client side

Question

Manage the dimensions of elements using Javascript on the client side

Here is a form I created:

<form action="#" enctype="multipart/form-data" method="post" name="..." id="formPhoto" class="fmp">
        <input type="file" name="pho" id="photo" class="inph" accept="image/*">
        <button type="submit" id="subFormPhoto" class="spp">click here</button>
</form>

Additionally, here is the JavaScript code I used:

<script type="text/javascript">
    var inputPhoto= document.getElementById('photo');
    inputPhoto.onchange=function(){var photo= this.value; photo.onload=function(){alert(this.width+' '+this.height);};};
</script>

I'm facing an issue where the

alert(this.width+' '+this.height);

is not displaying. It seems like the photo is not loading properly.

javascript controls

Answer 1

Answer №1

this.value provides the file name as a string, so your photo.onload function is not actually looking at the photo itself but just at a string. If you alert or console.log photo, you will understand what I mean.

You might want to explore the File API, as it is compatible with modern browsers starting from HTML 5.

Here is a functional example of your code:

var inputPhoto = document.getElementById('photo');

inputPhoto.onchange = function() {
  var file = this.files[0];
  var reader = new FileReader();
  var photo  = new Image();

  reader.readAsDataURL(file);
  reader.onload = function(_file) {
    photo.src = _file.target.result;
    photo.onload = function() {
      alert(this.width + ' ' + this.height);
    };
  };
};

Answer 2

this.value provides the file name as a string, so your photo.onload function is not actually looking at the photo itself but just at a string. If you alert or console.log photo, you will understand what I mean.

You might want to explore the File API, as it is compatible with modern browsers starting from HTML 5.

Here is a functional example of your code:

var inputPhoto = document.getElementById('photo');

inputPhoto.onchange = function() {
  var file = this.files[0];
  var reader = new FileReader();
  var photo  = new Image();

  reader.readAsDataURL(file);
  reader.onload = function(_file) {
    photo.src = _file.target.result;
    photo.onload = function() {
      alert(this.width + ' ' + this.height);
    };
  };
};

Answer 3

Answer №2

I have attempted to interpret your query and create a solution based on what I understood. http://jsfiddle.net/qo8ovmhn/

 <input type="file" name="pho" id="photo" class="inph" onchange="myFunction()">
<img id="view" src=""></img>    
<p id="demo"></p>


 <script>
 function myFunction() {
var x = document.getElementById("photo");
var file = x.files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(_file) {
 var img = document.getElementById("view");
 img.setAttribute("src",_file.target.result);
 var height = img.offsetHeight;
 var width = img.offsetWidth;
 alert(width + " X " + height);

 };
  }
</script>

Check to see if this meets your requirements. The input's change event triggers when an image is selected. The image data is read and displayed in an image tag. The image's dimensions are then retrieved from its height and width properties. You can conceal the image by using CSS with visibility:hidden or opacity:0 Avoid using display:none as it will result in a height and width of 0px

Finally, the image dimensions are displayed in an alert.

Answer 4

I have attempted to interpret your query and create a solution based on what I understood. http://jsfiddle.net/qo8ovmhn/

 <input type="file" name="pho" id="photo" class="inph" onchange="myFunction()">
<img id="view" src=""></img>    
<p id="demo"></p>


 <script>
 function myFunction() {
var x = document.getElementById("photo");
var file = x.files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(_file) {
 var img = document.getElementById("view");
 img.setAttribute("src",_file.target.result);
 var height = img.offsetHeight;
 var width = img.offsetWidth;
 alert(width + " X " + height);

 };
  }
</script>

Check to see if this meets your requirements. The input's change event triggers when an image is selected. The image data is read and displayed in an image tag. The image's dimensions are then retrieved from its height and width properties. You can conceal the image by using CSS with visibility:hidden or opacity:0 Avoid using display:none as it will result in a height and width of 0px

Finally, the image dimensions are displayed in an alert.

Manage the dimensions of elements using Javascript on the client side

Answer №1

Answer №2

Similar questions

Verify if the key-value pair can be found within a multi-layered object

JavaScript running out of memory during yarn build process

"Revamp your site with Vue and API for dynamic background

"An error message is displayed stating that the maximum call stack size has been exceeded while looping through an

Tips for adding a personalized close button to a Bootstrap modal

Using vue.js to make an HTTP GET request to a web API URL and display

The AJAX request function in JavaScript seems to be failing to return any response

Issues with displaying markers on Google Maps API using JSON and AJAX

What is the reason behind TypeScript choosing to define properties on the prototype rather than the object itself?

Tips for creating a typescript typeguard function for function types

Is Angular automatically assigned to `window.angular` on a global level when it is loaded as a CommonJS module?

JavaScript code to verify if a checkbox is selected

Turn off HTML5 Audio

What is the process of unmounting the next/script on page change within a next.js application?

Problems with Google Maps Event Tracker

When executing a Javascript POST request to a PHP script, it succeeds when running on

What is the best way to showcase a chart using jquery?

Moving through divisions that share a common class name using jquery

Using the input type 'number' will result in null values instead of characters

Having trouble with an endless GET request loop in NextJS 13 while utilizing the Next-Auth middleware. Experiencing difficulties fetching the RSC payload