Upload Images With re-size Using PHP/MySQL

Submitted by argie on Wednesday, December 5, 2012 - 12:19.

Hi everyone, this tutorial will teach you on how to upload images with re-size and save to database using php/mysql. to start this tutorial, let's follow the step provided.

Step 1: Creating Our Table

First step is to create our table in database to store the images uploaded. To create a database: 1. Open phpmyadmin 2. Click create table and name it as "images". 3. After creating a database name, click the SQL and paste the below code.

CREATE TABLE IF NOT EXISTS `location` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `locations` varchar(100) NOT NULL,
  `height` int(11) NOT NULL,
  `width` int(11) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=0 ;

Step 2: Creating The Form

Next step is to create a form and save it as index.php. To create a form, open your HTML code editor and paste the code below.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Image Upload with resize</title>
<style type="text/css">
<!--
body,td,th {
        font-family: Arial, Helvetica, sans-serif;
        color: #333333;
        font-size: 12px;
}
 
.upload_message_success {
        padding:4px;
        background-color:#009900;
        border:1px solid #006600;
        color:#FFFFFF;
        margin-top:10px;
        margin-bottom:10px;
}
 
.upload_message_error {
        padding:4px;
        background-color:#CE0000;
        border:1px solid #990000;
        color:#FFFFFF;
        margin-top:10px;
        margin-bottom:10px;
}
 
-->
</style></head>
 
<body>
 
<h1 style="margin-bottom: 0px">Submit an image</h1>
<form action="resizeexec.php" method="post" enctype="multipart/form-data" name="image_upload_form" id="image_upload_form" style="margin-bottom:0px;">
<label>Image file, maximum 4MB. it can be jpg, gif,  png:</label><br />
          <input name="image_upload_box" type="file" id="image_upload_box" size="40" />
             
     
     <br />
        <br />
 
     
      <label>Scale down image? (2592 x 1944 px max):</label>
      <br />
      <input name="max_width_box" type="text" id="max_width_box" value="1024" size="4">
      x      
      
      <input name="max_height_box" type="text" id="max_height_box" value="768" size="4">
      px.
      <br />
      <br />
<input name="submitted_form" type="hidden" id="submitted_form" value="image_upload_form" />
<input type="submit" name="submit" value="Upload image" />  
</form>
</body>
</html>

Step 3: Create folder that Store Our Images

Create a table and name it as "image_files".

Step 4: Creating Our Connection

Next step is to create a database connection and save it as "db.php". This file is used to connect our form to database. This file serves as a bridge between our form and our database.

<?php
$mysql_hostname = "localhost";
$mysql_user = "root";
$mysql_password = "";
$mysql_database = "images";
$prefix = "";
$bd = mysql_connect($mysql_hostname, $mysql_user, $mysql_password) or die("Could not connect database");
mysql_select_db($mysql_database, $bd) or die("Could not select database");
?>

Step 5: Writing Our Save, Re-size, and Upload Script

To create the script, copy the code below and paste it into you php editor and name it as "resizeexec.php".

<?php ini_set("memory_limit", "200000000"); // for large images so that we do not get "Allowed memory exhausted"?>
<?php
// upload the file
if ((isset($_POST["submitted_form"])) && ($_POST["submitted_form"] == "image_upload_form")) {
        
        // file needs to be jpg,gif,bmp,x-png and 4 MB max
        if (($_FILES["image_upload_box"]["type"] == "image/jpeg" || $_FILES["image_upload_box"]["type"] == "image/pjpeg" || $_FILES["image_upload_box"]["type"] == "image/gif" || $_FILES["image_upload_box"]["type"] == "image/x-png") && ($_FILES["image_upload_box"]["size"] < 4000000))
        {
                
  
                // some settings
                $max_upload_width = 2592;
                $max_upload_height = 1944;
                  
                // if user chosed properly then scale down the image according to user preferances
                if(isset($_REQUEST['max_width_box']) and $_REQUEST['max_width_box']!='' and $_REQUEST['max_width_box']<=$max_upload_width){
                        $max_upload_width = $_REQUEST['max_width_box'];
                }    
                if(isset($_REQUEST['max_height_box']) and $_REQUEST['max_height_box']!='' and $_REQUEST['max_height_box']<=$max_upload_height){
                        $max_upload_height = $_REQUEST['max_height_box'];
                }       
 
                
                // if uploaded image was JPG/JPEG
                if($_FILES["image_upload_box"]["type"] == "image/jpeg" || $_FILES["image_upload_box"]["type"] == "image/pjpeg"){        
                        $image_source = imagecreatefromjpeg($_FILES["image_upload_box"]["tmp_name"]);
                }               
                // if uploaded image was GIF
                if($_FILES["image_upload_box"]["type"] == "image/gif"){ 
                        $image_source = imagecreatefromgif($_FILES["image_upload_box"]["tmp_name"]);
                }       
                // BMP doesn't seem to be supported so remove it form above image type test (reject bmps)       
                // if uploaded image was BMP
                if($_FILES["image_upload_box"]["type"] == "image/bmp"){ 
                        $image_source = imagecreatefromwbmp($_FILES["image_upload_box"]["tmp_name"]);
                }                       
                // if uploaded image was PNG
                if($_FILES["image_upload_box"]["type"] == "image/x-png"){
                        $image_source = imagecreatefrompng($_FILES["image_upload_box"]["tmp_name"]);
                }
                
 
                $remote_file = "image_files/".$_FILES["image_upload_box"]["name"];
                imagejpeg($image_source,$remote_file,100);
                chmod($remote_file,0644);
        
                
 
                // get width and height of original image
                list($image_width, $image_height) = getimagesize($remote_file);
        
                if($image_width>$max_upload_width || $image_height >$max_upload_height){
                        $proportions = $image_width/$image_height;
                        
                        if($image_width>$image_height){
                                $new_width = $max_upload_width;
                                $new_height = round($max_upload_width/$proportions);
                        }               
                        else{
                                $new_height = $max_upload_height;
                                $new_width = round($max_upload_height*$proportions);
                        }               
                        
                        include('db.php');
                        mysql_query("INSERT INTO location (locations, height, width) VALUES ('$remote_file','$new_height','$new_width')");
                        $new_image = imagecreatetruecolor($new_width , $new_height);
                        $image_source = imagecreatefromjpeg($remote_file);
                        
                        imagecopyresampled($new_image, $image_source, 0, 0, 0, 0, $new_width, $new_height, $image_width, $image_height);
                        imagejpeg($new_image,$remote_file,100);
                        
                        imagedestroy($new_image);
                }
                
                imagedestroy($image_source);
                
                
                header("Location: index.php");
                exit;
        }
        else{
                header("Location: index.php");
                exit;
        }
}
?>

That's it you've been successfully created the system that upload image, re-size, and save it to database. Hope this code will help you, thank you:).

Add new comment

600 views