image upload by ajax in php example
PHP Image Upload and create thumbnail without refreshing the page past using the jQuery Course Plugin.
The tutorial contains three PHP files, and ii js files include jQuery plugin.
- jQuery and JQueryForm Plugin
- PHP thumbnail generator function
Features
- The prototype will be uploaded without refreshing the page.
- An upload progress bar can be displayed.
- JPG, PNG, and gif file tin be uploaded.
- The prototype will exist converted to the required format.
- The image will be automobile-crop and can be focused.
image_upload_demo.php
User interface page.
<link href="./css/manner.css" rel="stylesheet"> <script src="./js/jquery.min.js"></script> <script src="./js/jquery.form.js"></script> <script> $(document).on('change', '#image_upload_file', office () { var progressBar = $('.progressBar'), bar = $('.progressBar .bar'), percentage = $('.progressBar .percentage'); $('#image_upload_form').ajaxForm({ beforeSend: function() { progressBar.fadeIn(); var percentVal = '0%'; bar.width(percentVal) percentage.html(percentVal); }, uploadProgress: function(issue, position, full, percentComplete) { var percentVal = percentComplete + '%'; bar.width(percentVal) pct.html(percentVal); }, success: part(html, statusText, xhr, $form) { obj = $.parseJSON(html); if(obj.status){ var percentVal = '100%'; bar.width(percentVal) pct.html(percentVal); $("#imgArea>img").prop('src',obj.image_medium); }else{ alert(obj.error); } }, complete: function(xhr) { progressBar.fadeOut(); } }).submit(); }); </script> </caput> <body> <div id="imgContainer"> <form enctype="multipart/class-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 Photograph</span> <input type="file" accept="image/*" name="image_upload_file" id="image_upload_file"> </div> </div> </form> </div> image_upload_demo_submit.php
<?php include('./functions.php'); /*defined settings - outset*/ 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/'); ascertain('IMAGE_MEDIUM_SIZE', 250); /*defined settings - terminate*/ if(isset($_FILES['image_upload_file'])){ $output['condition']=FALSE; set_time_limit(0); $allowedImageType = assortment("prototype/gif", "epitome/jpeg", "image/pjpeg", "image/png", "image/ten-png" ); if ($_FILES['image_upload_file']["error"] > 0) { $output['error']= "Error in File"; } elseif (!in_array($_FILES['image_upload_file']["type"], $allowedImageType)) { $output['error']= "Y'all can simply upload JPG, PNG and GIF file"; } elseif (circular($_FILES['image_upload_file']["size"] / 1024) > 4096) { $output['error']= "You can upload file size upwards 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']['proper noun']); $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[one], $path[two],"$desiredExt", IMAGE_SMALL_SIZE, IMAGE_SMALL_SIZE,IMAGE_SMALL_SIZE)) { $output['status']=Truthful; $output['image_medium']= $path[i]; $output['image_small']= $path[two]; } } } echo json_encode($output); } ?> functions.php
Image thumbnail creation and directory checking function.
<?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 == Imitation) { $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" epitome */ $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 paradigm 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 / two; if ($orig_w > $orig_h) { $adjusted_width = $orig_w / $hm; $half_width = $adjusted_width / two; $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 Truthful; } else { return FALSE; } } ?> style.css
CSS lawmaking to display image container and progress bar.
#imgContainer { width: 100%; text-marshal: centre; position: relative; } #imgArea { brandish: inline-block; margin: 0 auto; width: 150px; height: 150px; position: relative; groundwork-color: #eee; font-family: Arial, Helvetica, sans-serif; font-size: 13px; } #imgArea img { outline: medium none; vertical-align: centre; width: 100%; } #imgChange { background: url("../img/overlay.png") repeat scroll 0 0 rgba(0, 0, 0, 0); bottom: 0; color: #FFFFFF; display: cake; height: 30px; left: 0; line-height: 32px; position: absolute; text-marshal: heart; width: 100%; } #imgChange input[type="file"] { bottom: 0; cursor: pointer; height: 100%; left: 0; margin: 0; opacity: 0; padding: 0; position: absolute; width: 100%; z-index: 0; } /* Progressbar */ .progressBar { background: none echo whorl 0 0 #E0E0E0; left: 0; padding: 3px 0; position: accented; top: 50%; width: 100%; display: none; } .progressBar .bar { groundwork-color: #FF6C67; width: 0%; height: 14px; } .progressBar .per centum { display: inline-block; left: 0; position: absolute; text-marshal: heart; peak: 2px; width: 100%; } 
Source: https://www.w3schools.in/php-script/image-upload-and-generate-thumbnail-using-ajax-in-php/
0 Response to "image upload by ajax in php example"
ارسال یک نظر