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

21 comments:

  1. Hi, it is a really good script..it helps me a lot. However, why the new image gone whenever i refresh the page...how can i make it stay with the new image. Thanks

    ReplyDelete
  2. You need to insert path file name into database.

    ReplyDelete
  3. Best php script, thanks for this

    ReplyDelete
    Replies
    1. you are welcome and thanks for your comments.

      Delete
  4. how you enter path file into database.?

    ReplyDelete
  5. I don't usually go around posting stuff like this but THANKS SO MUCH. Saved me so much time, very kind :)

    ReplyDelete
  6. Merbin,
    I did a lot of search for the past few days, nothing came even closer to this. Either its a over kill or they need a stupid browse button to upload.
    Thank you and god bless.

    ReplyDelete
  7. is possible to check if image exist? then replace or use it that to update to database?

    ReplyDelete
  8. when i upload to my real server, i got error message as underfine. I am not sure what is wrong, I did check error_log and there is nothing there.

    ReplyDelete
  9. I just tried it out...i check everything 10 times, nothing is missing, but after browsing the picture actually nothing happens. Whats the matter with that? Thank you!

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

    ReplyDelete
  11. its work but its have a problem to upload images took from digital camera. if you have any photos please try

    ReplyDelete
  12. I can't run this script on my local server, please tell me php config settings.. Thank you.

    ReplyDelete
    Replies
    1. There no need any special settings!!!

      Delete
  13. On my local server its working fine but on ubuntu server getting interval server error 500 no permission error and no php error.

    ReplyDelete

Total Pageviews