In my project, I am facing a challenge with image uploading functionality. The requirement is to check if the uploaded image exceeds the maximum criteria set. If it does, an alert message should be displayed.
alert("Height exceeds our maximum criteria. Please select an image within height and width limits etc.");
Although I have successfully implemented all functionalities, I encounter an issue when uploading images. I need to display the actual height and width of the selected image, but instead, I receive the dimensions of the previously selected image.
Below is a snippet of my code:
<!DOCTYPE html>
<html>
<head>
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"></link>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
function readImage(file) {
var reader = new FileReader();
var image = new Image();
var maxh = 800;
var maxw = 800;
//rest of the code
}
$("#choose").change(function (e) {
//file upload logic
});
</script>
<style>
#uploadPreview img {
height:32px;
}
</style>
</head>
<body >
<input type="file" id="choose" multiple="multiple" />
<br>
<div id="uploadPreview"></div>
</body>
</html>
Issue: I consistently retrieve the dimensions of the previously selected image, not the current one. This leads to inaccurate information being displayed.
I hope my question is clear. Thank you for your assistance.