$(function () {
  $('#example1').DataTable({
    responsive: true
  });
});

var _URL = window.URL || window.webkitURL;
  $('#page_image').change(function () {
      var file = $(this)[0].files[0];

      img = new Image();
      var imgwidth = 0;
      var imgheight = 0;
      var maxwidth = 500;
      var maxheight = 500;

      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', $('#page_image')[0].files[0]);
      var reader = new FileReader();
    
      reader.onload = function (e) {
        $('#image_tag').attr('src', img.src);
      }
      reader.readAsDataURL($('#page_image')[0].files[0]);

    }else{
      alert("image size must be "+maxwidth+"X"+maxheight);
      $("#page_image").val("");
    }
   };
    img.onerror = function() {
    $("#response").text("not a valid file: " + file.type);
   }

  });