Multiple Image Upload with Resize

Today’s code is in PHP and pastes together code snippets from two other sources (I wish I could remember from where…) and some of my own code.

What we have here is an image upload that supports 3 images (or more…) at a time and automatically converts them to png and resizes them to a maximum size (with width taking priority). You’ll need GD support to get anywhere.

<html>
<head>
<title>Image Upload Script</title>
</head>
<body>
<?php
if ($_POST['submitted']) { //submit form?
	$errors = array(); //initialize errors array.
	$warns = array(); //initialize warnings array.
	$name = uniqid('',TRUE); //create a unique ID with more entropy
	//handle each picture
	for ($i=1; $i<4; $i++) { //change this to reflect how many images you're trying to upload
		if ($_FILES["picture$i"]["error"] == UPLOAD_ERR_OK) {
			if ($image = open_image($_FILES["picture$i"]['tmp_name'])) {
				// Set a maximum height and width
				$width = 800;
				$height = 600;
				
				// Get original dimensions
				$width_orig = imagesx($image);
				$height_orig = imagesy($image);
				
				$ratio_orig = $width_orig/$height_orig;
				
				if ($width/$height > $ratio_orig) {
					$width = $height*$ratio_orig;
				} else {
					$height = $width/$ratio_orig;
				}
				
				// Resample
				$image_p = imagecreatetruecolor($width, $height);
				imagecopyresampled($image_p, $image, 0, 0, 0, 0, $width, $height, $width_orig, $height_orig);
					
				imagepng($image_p, "images/$name$i.png");
			} else {
				$warns[] =  $_FILES["picture$i"]['name'] . ' is an unsupported image format';
			}
		} else {
			$errors[] = $_FILES["picture$i"]["error"];
		}
	}
	if ($warns) { //bad file type
		echo '<em><font color="orange">Warning</font></em><br />';
		foreach ($warns as $warn) { // Print each error.
			echo " - $warn<br />\n";
		}
		echo '<br /><br />';
	}
	
	if ($errors) { //something went wrong...
		echo '<font color="red"><h2>Error</h2>';
		foreach ($errors as $error) { // Print each error.
			echo " - $error<br />\n";
		}
		echo "</font><br />Please Try Again.<br /><br />\n";
	} else {
		echo "Your files were uploaded successfully!<br />Your ID was $name<br /><br />";
	}
}

//Function so we can upload different image types
function open_image ($file) {
	//jpg
	if($im = imagecreatefromjpeg($file)) return $im;
	
	//gif
	if($im = imagecreatefromgif($file)) return $im;
	
	//png
	if($im = imagecreatefrompng($file)) return $im;
	
	return false;
}

?>
<form action="images.php" enctype="multipart/form-data" method="post">
<h3>Pictures:</h3><br />
Picture 1:<input type="file" name="picture1"/><br />
Picture 2:<input type="file" name="picture2"/><br />
Picture 3:<input type="file" name="picture3"/><br />
<input type="submit" name="submitted" value="Upload" /><br />
</form>
<em>Images must be either .jpg, .jpeg,</em><td><em>.gif or .png</em>
</td></body>
</html>

We create a unique ID per upload so that the user can upload multiple files and find them using the ID + the image number, so if the ID was “abc” then the first picture would be “abc1.png” I originally used this for a product that had various shots, so I was using a product ID and the images would get rewritten if they were uploaded over an existing one.

source code

Leave a Reply

You must be logged in to post a comment.