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

combination of http://php.net/manual/en/features.file-upload.post-method.php and any imagelib from php should do the trick — Ann-Sophie Angermüller, Jul 07 '17 at 11:59
@Ann-SophieAngermüller No. The question is asking to validate files *before* upload. This could help: https://stackoverflow.com/questions/12570834/how-to-preview-image-get-file-size-image-height-and-width-before-upload — Matej Kormuth, Jul 07 '17 at 12:00
https://stackoverflow.com/questions/8903854/check-image-width-and-height-before-upload-with-javascript — Ashu, Jul 07 '17 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 missleading — Ann-Sophie Angermüller, Jul 07 '17 at 12:03
image size: https://wordpress.stackexchange.com/a/228306/121736 — I haz kode, Jul 07 '17 at 12:23
You are expected to try to **write the code yourself**. After [**doing more research**](https://meta.stackoverflow.com/q/261592/1011527) 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](http://stackoverflow.com/help/mcve). Read [How to Ask](http://stackoverflow.com/help/how-to-ask) a good question. Be sure to [take the tour](http://stackoverflow.com/tour) and read [this](https://meta.stackoverflow.com/q/347937/1011527). — Jay Blanchard, Jul 07 '17 at 12:24

score 7 · Accepted Answer · answered Jul 07 '17 at 12:05

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

 });
});

score 1 · Answer 2 · answered Jul 07 '17 at 12:14

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.

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

2 Answers2