I want to validate my image size, height, width and image format before upload with jquery or PHP. I found many answers, but I have not found all validate is together.
Image format = png, Image size = 2mb, Image height = 800px, Image width= 600
7
-
combination of php.net/manual/en/features.file-upload.post-method.php and any imagelib from php should do the trickAnn-Sophie Angermüller– Ann-Sophie Angermüller2017-07-07 11:59:58 +00:00Commented Jul 7, 2017 at 11:59
-
1Please add code which you triedNirav Joshi– Nirav Joshi2017-07-07 12:00:16 +00:00Commented Jul 7, 2017 at 12:00
-
1@Ann-SophieAngermüller No. The question is asking to validate files before upload. This could help: stackoverflow.com/questions/12570834/…Matej Kormuth– Matej Kormuth2017-07-07 12:00:35 +00:00Commented Jul 7, 2017 at 12:00
-
stackoverflow.com/questions/8903854/…Ashu– Ashu2017-07-07 12:01:00 +00:00Commented Jul 7, 2017 at 12:01
-
@MatejKormuth it was unclear in my opinion if the "final" upload was meant by that. because the file upload itself will push the files to a tmp dir, where they can and will be easily deleted. But yeah, if it should happen before any upload at all, you are right. But then the PHP Tag is missleadingAnn-Sophie Angermüller– Ann-Sophie Angermüller2017-07-07 12:03:52 +00:00Commented Jul 7, 2017 at 12:03
|
Show 2 more comments
2 Answers
You can use jQuery to achieve this.
Demo code Once write a normal code input type ="file" and write down their id in below jQuery.
$(document).ready(function(){
var _URL = window.URL || window.webkitURL;
$('#file').change(function () {
var file = $(this)[0].files[0];
img = new Image();
var imgwidth = 0;
var imgheight = 0;
var maxwidth = 640;
var maxheight = 640;
img.src = _URL.createObjectURL(file);
img.onload = function() {
imgwidth = this.width;
imgheight = this.height;
$("#width").text(imgwidth);
$("#height").text(imgheight);
if(imgwidth <= maxwidth && imgheight <= maxheight){
var formData = new FormData();
formData.append('fileToUpload', $('#file')[0].files[0]);
$.ajax({
url: 'upload_image.php',
type: 'POST',
data: formData,
processData: false,
contentType: false,
dataType: 'json',
success: function (response) {
if(response.status == 1){
$("#prev_img").attr("src","upload/"+response.returnText);
$("#prev_img").show();
$("#response").text("Upload successfully");
}else{
$("#response").text(response.returnText);
}
}
});
}else{
$("#response").text("Image size must be "+maxwidth+"X"+maxheight);
}
};
img.onerror = function() {
$("#response").text("not a valid file: " + file.type);
}
});
});
Comments
As you have asked for jquery or PHP, I will suggest you to use php for this kind validation, Due to security point of view you must validate your uploaded file at server side. First to check if file is image you can use
mime_content_type or finfo_open()
After validating your file is image you can go for width and height
list($width, $height) = getimagesize($_FILES["fileToUpload"]);
for size you use
$_FILES["fileToUpload"]["size"]
Hope combining this will resolve your issue.
