Multiple image upload and resize using AJAX

One of the most important features in the social media platforms is uploading and resizing images using ajax without refreshing the web page. If you manage a website that serves a lot of users data, you need to decrease the transferred data from your server to the browser as possible as you can. So, page open speed will be higher and users requests don't make use of huge bandwidth. Image resizing is one the solutions to make your page only loads the needed data with more speed and less bandwidth. We just need users' profiles photos in small in almost pages the exception is only their profile's page. So, it is so bad to view these small photos using a big size image. You just need to resize it while uploading.

In this tutorial, you will learn how to upload images using jquery and PHP without refreshing pages and how to use php image functions for resizing images in different dimensions.

We need:

  • HTML form in index.php.
  • Use jquery.form.js to send ajax request.
  • Write php code for uploading images.
  • Write php code for resizing images.

Step1 : In index.php we will create our HTML form that has file upload

<div id="viewall" style="width:888px">
			<form enctype="multipart/form-data" name='upload-form' role="form" id="upload-form" method="post" action="ajax.php">
				<div class="form-group">
					<p>Please Choose Image: </p>
					<input class='file' multiple type="file" class="form-control" name="photofile" id="photofile" placeholder="Upload your image">
					<span class="help-block"></span>
				</div>

				
			</form>
		</div>

div with id 'viewall' will b used to include uploaded images
We will include jquery.js and jquery.form.js files inside the header and write the javascript code for sending the form data when the file upload input changes.

<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/jquery.form.js"></script>

<script type="text/javascript" >
 $(document).ready(function() { 
 			// an integer variable used to add unique number to evry image uploaded after loading the page	
			var int = 1;
			// bind change event with the function responsible for ajax request
            $('#photofile').on('change', function()			{ 
			
			$('#viewall').append('<div class="view" id ="img'+int+'" ></div>');
			  // add an image for loading to the new div        
	 		$('#img'+int).html('<img src="loader.gif" alt="Uploading...."/>');
				// add a button responsible for deleting image
			$('#viewall').append('<button  class="delete">delete </button>');
				// use ajaxForm object to send the form data without refreshing the page
				
			$("#upload-form").ajaxForm({
				// target key determines where to output the data returned after the request success
				target: '#img'+int
			}).submit();
			// when the user click on delete button 
			$('.delete').click(function(){
				// using selectors to get the source of the uploaded image using jquery selectors
				var delete_btn = $(this);
				var img_src = $(this).prev('.view').children('img').attr('src');
				var img_id = $(this).prev('.view').attr('id');
				$.ajax({
					// ajax url to the php page that delete images
					url:'ajax.php?do=delete',
					data:{'image_file':img_src},
					success: function(data){
				
						if(data.match(/wrong_path/)){
							alert('Problem in deleting image');							
						}else if(data.match(/delete_success/)){
							// after the deletion success we erase the page from webpage using jquery selectors
							//$('.delete').prev('.view').remove();
							$('#'+img_id).remove();
							delete_btn.remove();
							alert('image was deleted sucessfully');
						}
						//else if(data.match(/delete_fail/)){
						//	alert('Problem in deleting image');
						//}
						
					}
				});
				
				})
		int ++;
			});
        }); 
</script>

We bound the change event of the file input to the upload process. We start with adding new elements to the page by appending them to #viewall div. These elements view a loader  image and represent a delete button. Then, create an ajax object to send the form data using ajax request and made the target of returned data  #img  element .

The second task was to add jquery and ajax deleting  code to the click event of '.delete' element.

Step2 : PHP code for uploading images

Create 'uploads' folder, and inside it, create two folders:
- 'img' for the uploaded images

- 'thumbs' for the resized images

Create the ' ajax.php' that is responsible for uploading, resizing, and deleting images.

// check if there is avalid post request 
	if(isset($_POST)  && isset($_FILES['photofile']))
		{
				// uploading path 
			$upload_path = "uploads/img/";
			// the valid image extensions that the script inly allow uploading it 
			$supported_formats = array("jpg", "png", "gif", "bmp");
			// Get the name and the size of the image 
			$file_name = $_FILES['photofile']['name'];
			$file_size = $_FILES['photofile']['size'];
			
			if(strlen($file_name))
				{
					// extracting the extension from image file name
					list($txt, $ext) = explode(".", $file_name);
					if(in_array($ext,$supported_formats))
					{
					//	restrict the image size option only this or less sizes are allowed
					if($file_size<(1024*1024))
						{
							// generate a uinique new name for the image
							$actual_file_name = time().substr(str_replace(" ", "_", $txt), 5).".".$ext;
							$new_file_path = $upload_path.$actual_file_name;
							// image  place in the temporary folders in server
							$tmp = $_FILES['photofile']['tmp_name'];
							// upload the image using move_uploaded_file() function
							if(move_uploaded_file($tmp, $new_file_path))
								{
									// after uploading start resising using my function resizeimg();
									resizeimg($new_file_path, 'uploads/thumbs/'.$actual_file_name, 100, 100);
								
									// out put an image element views the uploaded image 
									// this element will be returned by the ajax request to the index.php page 
									echo "<img src='".$new_file_path."'  class='img'>";
								}
							else
								echo "failed";
						}
						else{
							echo "file cannot be more than 1 MB";					
						}
						}
						else{
							echo "Unsupported file format we allow :jpg, png, gif, and bmp .";	
						}
				}
				
			else
				echo "You didn't select any images";
				
			exit;
		}

 

Step3: php code for resizing images

We write resizeimg() function that resize our images to thumbnails .It takes four parameters:

- $file : the original image file.

- $newfile : the path and the name for the new thumbnail.

- $newwidth : the width of the new thumbnail.

- $newheight : the height of the new thumbnail.

function resizeimg($file, $newfile, $newwidth, $newheight){
			if(!is_file($file) == true){
				echo 'Cannot find file, upload it again !';
				exit();
			}

			list($width, $height) = getimagesize($file);
			// prepare for creating a new image that would be the thumbnail image
			$thumb = imagecreatetruecolor($newwidth, $newheight);
			$pathinfo = pathinfo($file);

			switch(strtolower($pathinfo['extension'])){
				case "jpeg" || "jpg":
					$source = imagecreatefromjpeg($file);
					imagecopyresized($thumb, $source, 0, 0, 0, 0, floor($newwidth), floor($newheight), $width, $height);
					imagejpeg($thumb, $newfile);
				break;

				case "png":
					$source = imagecreatefrompng($file);
					imagecopyresized($thumb, $source, 0, 0, 0, 0, floor($newwidth), floor($newheight), $width, $height);
					imagepng($thumb, $newfile);
				break;

				case "gif":
					$source = imagecreatefromgif($file);
					imagecopyresized($thumb, $source, 0, 0, 0, 0, floor($newwidth), floor($newheight), $width, $height);
					imagegif($thumb, $newfile);
				break;
			

				default:
					$newfile = 'false';
				break;
			}
			imagedestroy($thumb);
			return $newfile;
		}
?>

Step4: php code for deleting images

In 'ajax.php' file, write the code of deleting images and thumbnails

// check if there is a GET request with correct value
		if(isset($_GET['do']) && $_GET['do']== 'delete'){
			// images path 
			$image = $_GET['image_file'];
			// thumbnails path 
			$thumb = str_replace('img','thumbs',$image);			
			if(!is_file($image) == true){
				echo 'wrong_path';
				exit();
			}
			// deleting the image and thumbnails files
			$deleted1 = unlink($image);
			$deleted2 = unlink($thumb);
			if($deleted1 && $deleted2){
				echo 'delete_success';
			}else{
				echo 'delete_fail';	
			}
			
		}

'ajax.php' file will be like this :

<?php
	// check if there is avalid post request 
	if(isset($_POST)  && isset($_FILES['photofile']))
		{
				// uploading path 
			$upload_path = "uploads/img/";
			// the valid image extensions that the script inly allow uploading it 
			$supported_formats = array("jpg", "png", "gif", "bmp");
			// Get the name and the size of the image 
			$file_name = $_FILES['photofile']['name'];
			$file_size = $_FILES['photofile']['size'];
			
			if(strlen($file_name))
				{
					// extracting the extension from image file name
					list($txt, $ext) = explode(".", $file_name);
					if(in_array($ext,$supported_formats))
					{
					//	restrict the image size option only this or less sizes are allowed
					if($file_size<(1024*1024))
						{
							// generate a uinique new name for the image
							$actual_file_name = time().substr(str_replace(" ", "_", $txt), 5).".".$ext;
							$new_file_path = $upload_path.$actual_file_name;
							// image  place in the temporary folders in server
							$tmp = $_FILES['photofile']['tmp_name'];
							// upload the image using move_uploaded_file() function
							if(move_uploaded_file($tmp, $new_file_path))
								{
									// after uploading start resising using my function resizeimg();
									resizeimg($new_file_path, 'uploads/thumbs/'.$actual_file_name, 100, 100);
								
									// out put an image element views the uploaded image 
									// this element will be returned by the ajax request to the index.php page 
									echo "<img src='".$new_file_path."'  class='img'>";
								}
							else
								echo "failed";
						}
						else{
							echo "file cannot be more than 1 MB";					
						}
						}
						else{
							echo "Unsupported file format we allow :jpg, png, gif, and bmp .";	
						}
				}
				
			else
				echo "You didn't select any images";
				
			exit;
		}

		
		// check if there is a GET request with correct value
		if(isset($_GET['do']) && $_GET['do']== 'delete'){
			// images path 
			$image = $_GET['image_file'];
			// thumbnails path 
			$thumb = str_replace('img','thumbs',$image);			
			if(!is_file($image) == true){
				echo 'wrong_path';
				exit();
			}
			// deleting the image and thumbnails files
			$deleted1 = unlink($image);
			$deleted2 = unlink($thumb);
			if($deleted1 && $deleted2){
				echo 'delete_success';
			}else{
				echo 'delete_fail';	
			}
			
		}
		
		function resizeimg($file, $newfile, $newwidth, $newheight){
			if(!is_file($file) == true){
				echo 'Cannot find file, upload it again !';
				exit();
			}

			list($width, $height) = getimagesize($file);
			// prepare for creating a new image that would be the thumbnail image
			$thumb = imagecreatetruecolor($newwidth, $newheight);
			$pathinfo = pathinfo($file);

			switch(strtolower($pathinfo['extension'])){
				case "jpeg" || "jpg":
					$source = imagecreatefromjpeg($file);
					imagecopyresized($thumb, $source, 0, 0, 0, 0, floor($newwidth), floor($newheight), $width, $height);
					imagejpeg($thumb, $newfile);
				break;

				case "png":
					$source = imagecreatefrompng($file);
					imagecopyresized($thumb, $source, 0, 0, 0, 0, floor($newwidth), floor($newheight), $width, $height);
					imagepng($thumb, $newfile);
				break;

				case "gif":
					$source = imagecreatefromgif($file);
					imagecopyresized($thumb, $source, 0, 0, 0, 0, floor($newwidth), floor($newheight), $width, $height);
					imagegif($thumb, $newfile);
				break;
			

				default:
					$newfile = 'false';
				break;
			}
			imagedestroy($thumb);
			return $newfile;
		}
?>

At the end of this article, you knew how to upload images in PHP and using ajax and how to resize it.

Share this Article on Social Media

All of my Scripts are ready to customized as per your requirement. Feel free to contact for script customization.

Contact me at discussdesk@gmail.com

"Note : It will be charged as per your customization requirement :)"

Get Updates, Scripts & Other Tutorials to Directly to your Email

Over 20000+ Happy Readers already subscribed. (We don't send spam email). Every email subscriber can get our latest updates and download our 100+ scripts.

Comments