How to validate image size, height, width and format before upload with jquery of PHP?

Question

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

Solution 1

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);
 }

 });
});

Solution 2

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.

Comments

[Ann-Sophie Angermüller]

combination of php.net/manual/en/features.file-upload.post-method.php and any imagelib from php should do the trick

[Nirav Joshi]

Please add code which you tried

[Matej Kormuth]

@Ann-SophieAngermüller No. The question is asking to validate files before upload. This could help: stackoverflow.com/questions/12570834/…

[Ashu]

stackoverflow.com/questions/8903854/…

[Ann-Sophie Angermüller]

@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 missleading

[I haz kode]

image size: wordpress.stackexchange.com/a/228306/121736

[Jay Blanchard]

You are expected to try to write the code yourself. After doing more research if you have a problem post what you've tried with a clear explanation of what isn't working and provide a Minimal, Complete, and Verifiable example. Read How to Ask a good question. Be sure to take the tour and read this.