84669 person learning
152542 person learning
20005 person learning
5487 person learning
7821 person learning
359900 person learning
3350 person learning
180660 person learning
48569 person learning
18603 person learning
40936 person learning
1549 person learning
1183 person learning
32909 person learning
<input type="file" id="file" accept="image/gif, image/jpeg, image/png">
The HTML code is structured as follows. In this case, if there is no image in the input with a 1:1 ratio, I want to move to another page via JavaScript.
You basically need to add a handler for the input and check height/width === 1 , you can use this function to verify it:
height/width === 1
const fileUpload = document.getElementById("file"); function validateImage(target) { const reader = new FileReader(); reader.readAsDataURL(fileUpload.files[0]); reader.onload = function (e) { const image = new Image(); image.src = e.target.result; image.onload = function () { const height = this.height; const width = this.width; if (height / width !== 1) { console.log("ASPECT RATIO NOT 1:1"); window.location.href = "#otherpage"; // redirect return false; } // do nothing return true; }; }; }
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
You basically need to add a handler for the input and check
height/width === 1, you can use this function to verify it:const fileUpload = document.getElementById("file"); function validateImage(target) { const reader = new FileReader(); reader.readAsDataURL(fileUpload.files[0]); reader.onload = function (e) { const image = new Image(); image.src = e.target.result; image.onload = function () { const height = this.height; const width = this.width; if (height / width !== 1) { console.log("ASPECT RATIO NOT 1:1"); window.location.href = "#otherpage"; // redirect return false; } // do nothing return true; }; }; }