AllInWorld99 provides a reference manual covering many aspects of web programming, including technologies such as HTML, XHTML, CSS, XML, JavaScript, PHP, ASP, SQL,FLASH, jQuery, java, for loop, switch case, if, if else, for...of, for...in, for...each,while loop, blogger tips, blogger meta tag generator, blogger tricks, blogger pagination, client side script, html code editor, javascript editor with instant output, css editor, online html editor, materialize css tutorial, materialize css dropdown list,break, continue statement, label,array, json, get day and month dropdown list using c# code, CSS button,protect cd or pendrive from virus, cordova, android example, html and css to make android app, html code play,telerik show hide column, Transparent image convertor, copy to clipboard using javascript without using any swf file, simple animation using css, SQL etc. AllInWorld99 presents thousands of code examples (accompanied with source code) which can be copied/downloaded independantly. By using the online editor provided,readers can edit the examples and execute the code experimentally.


Change Image Size on Upload

     In the following php project you  can upload a profile image and reduce the size while uploading time, using php and jquery script, it will change the profile picture in real time without refreshing and it is used ajax call.
     For Ajax and another some purpose you need to import following two javascript file.

  1. jquery.form
  2. jquery.min
Change Profile Photo using php
      

functions.php


<?php
function createDir($path){  
 if (!file_exists($path)) {
  $old_mask = umask(0);
  mkdir($path, 0777, TRUE);
  umask($old_mask);
 }
}

function createThumb($path1, $path2, $file_type, $new_w, $new_h, $squareSize = ''){
 /* read the source image */
 $source_image = FALSE;
 
 if (preg_match("/jpg|JPG|jpeg|JPEG/", $file_type)) {
  $source_image = imagecreatefromjpeg($path1);
 }
 elseif (preg_match("/png|PNG/", $file_type)) {
  
  if (!$source_image = @imagecreatefrompng($path1)) {
   $source_image = imagecreatefromjpeg($path1);
  }
 }
 elseif (preg_match("/gif|GIF/", $file_type)) {
  $source_image = imagecreatefromgif($path1);
 }  
 if ($source_image == FALSE) {
  $source_image = imagecreatefromjpeg($path1);
 }

 $orig_w = imageSX($source_image);
 $orig_h = imageSY($source_image);
 
 if ($orig_w < $new_w && $orig_h < $new_h) {
  $desired_width = $orig_w;
  $desired_height = $orig_h;
 } else {
  $scale = min($new_w / $orig_w, $new_h / $orig_h);
  $desired_width = ceil($scale * $orig_w);
  $desired_height = ceil($scale * $orig_h);
 }
   
 if ($squareSize != '') {
  $desired_width = $desired_height = $squareSize;
 }

 /* create a new, "virtual" image */
 $virtual_image = imagecreatetruecolor($desired_width, $desired_height);
 // for PNG background white----------->
 $kek = imagecolorallocate($virtual_image, 255, 255, 255);
 imagefill($virtual_image, 0, 0, $kek);
 
 if ($squareSize == '') {
  /* copy source image at a resized size */
  imagecopyresampled($virtual_image, $source_image, 0, 0, 0, 0, $desired_width, $desired_height, $orig_w, $orig_h);
 } else {
  $wm = $orig_w / $squareSize;
  $hm = $orig_h / $squareSize;
  $h_height = $squareSize / 2;
  $w_height = $squareSize / 2;
  
  if ($orig_w > $orig_h) {
   $adjusted_width = $orig_w / $hm;
   $half_width = $adjusted_width / 2;
   $int_width = $half_width - $w_height;
   imagecopyresampled($virtual_image, $source_image, -$int_width, 0, 0, 0, $adjusted_width, $squareSize, $orig_w, $orig_h);
  }

  elseif (($orig_w <= $orig_h)) {
   $adjusted_height = $orig_h / $wm;
   $half_height = $adjusted_height / 2;
   imagecopyresampled($virtual_image, $source_image, 0,0, 0, 0, $squareSize, $adjusted_height, $orig_w, $orig_h);
  } else {
   imagecopyresampled($virtual_image, $source_image, 0, 0, 0, 0, $squareSize, $squareSize, $orig_w, $orig_h);
  }
 }
 
 if (@imagejpeg($virtual_image, $path2, 90)) {
  imagedestroy($virtual_image);
  imagedestroy($source_image);
  return TRUE;
 } else {
  return FALSE;
 }
} 
?>

image_upload_demo.php


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Image upload and generate thumbnail using ajax in PHP</title>
<link href="./css/style.css" rel="stylesheet">
<script src="./js/jquery.min.js"></script>
<script src="./js/jquery.form.js"></script>
<script>
$undefineddocument).onundefined'change', '#image_upload_file', function undefined) {
var progressBar = $undefined'.progressBar'), bar = $undefined'.progressBar .bar'), percent = $undefined'.progressBar .percent');

$undefined'#image_upload_form').ajaxFormundefined{
    beforeSend: functionundefined) {
  progressBar.fadeInundefined);
        var percentVal = '0%';
        bar.widthundefinedpercentVal)
        percent.htmlundefinedpercentVal);
    },
    uploadProgress: functionundefinedevent, position, total, percentComplete) {
        var percentVal = percentComplete + '%';
        bar.widthundefinedpercentVal)
        percent.htmlundefinedpercentVal);
    },
    success: functionundefinedhtml, statusText, xhr, $form) {  
  obj = $.parseJSONundefinedhtml); 
  ifundefinedobj.status){  
   var percentVal = '100%';
   bar.widthundefinedpercentVal)
   percent.htmlundefinedpercentVal);
   $undefined"#imgArea>img").propundefined'src',obj.image_medium);   
  }else{
   alertundefinedobj.error);
  }
    },
 complete: functionundefinedxhr) {
  progressBar.fadeOutundefined);   
 } 
}).submitundefined);  

});
</script>
</head>

<body>

<div id="frame0">
  <h1>Image upload and generate thumbnail using ajax in php.</h1>
  <p>More tutorials <a href="http://www.w3schools.in/">http://www.w3schools.in/</a></p>
</div>
<br>
<div id="imgContainer">
  <form enctype="multipart/form-data" action="image_upload_demo_submit.php" method="post" name="image_upload_form" id="image_upload_form">
    <div id="imgArea"><img src="./img/default.jpg">
      <div class="progressBar">
        <div class="bar"></div>
        <div class="percent">0%</div>
      </div>
      <div id="imgChange"><span>Change Photo</span>
        <input type="file" accept="image/*" name="image_upload_file" id="image_upload_file">
      </div>
    </div>
  </form>
</div>
</body>
</html>



image_upload_demo_submit.php


<?php
include('./functions.php');
/*defined settings - start*/
ini_set("memory_limit", "99M");
ini_set('post_max_size', '20M');
ini_set('max_execution_time', 600);
define('IMAGE_SMALL_DIR', './uploades/small/');
define('IMAGE_SMALL_SIZE', 50);
define('IMAGE_MEDIUM_DIR', './uploades/medium/');
define('IMAGE_MEDIUM_SIZE', 250);
/*defined settings - end*/

if (isset($_FILES['image_upload_file'])) {
    $output['status'] = FALSE;
    set_time_limit(0);
    $allowedImageType = array(
        "image/gif",
        "image/jpeg",
        "image/pjpeg",
        "image/png",
        "image/x-png"
    );
    
    if ($_FILES['image_upload_file']["error"] > 0) {
        $output['error'] = "Error in File";
    } elseif (!in_array($_FILES['image_upload_file']["type"], $allowedImageType)) {
        $output['error'] = "You can only upload JPG, PNG and GIF file";
    } elseif (round($_FILES['image_upload_file']["size"] / 1024) > 4096) {
        $output['error'] = "You can upload file size up to 4 MB";
    } else {
        /*create directory with 777 permission if not exist - start*/
        createDir(IMAGE_SMALL_DIR);
        createDir(IMAGE_MEDIUM_DIR);
        /*create directory with 777 permission if not exist - end*/
        $path[0]     = $_FILES['image_upload_file']['tmp_name'];
        $file        = pathinfo($_FILES['image_upload_file']['name']);
        $fileType    = $file["extension"];
        $desiredExt  = 'jpg';
        $fileNameNew = rand(333, 999) . time() . ".$desiredExt";
        $path[1]     = IMAGE_MEDIUM_DIR . $fileNameNew;
        $path[2]     = IMAGE_SMALL_DIR . $fileNameNew;
        
        if (createThumb($path[0], $path[1], $fileType, IMAGE_MEDIUM_SIZE, IMAGE_MEDIUM_SIZE, IMAGE_MEDIUM_SIZE)) {
            
            if (createThumb($path[1], $path[2], "$desiredExt", IMAGE_SMALL_SIZE, IMAGE_SMALL_SIZE, IMAGE_SMALL_SIZE)) {
                $output['status']       = TRUE;
                $output['image_medium'] = $path[1];
                $output['image_small']  = $path[2];
            }
        }
    }
    echo json_encode($output);
}
?>

7 comments:

  1. It works for awhile for me but in a little while I got stuck up not uploading the picture anymore :(

    ReplyDelete
  2. Good, but how can i call my databases ?
    thanks.

    ReplyDelete
    Replies
    1. Save the file name and folder name into your database. When you want to display the image just get the file name from the database and display it.

      Delete
  3. god work. nice and simple. do you do projects like this for a fee???

    ReplyDelete

Total Pageviews