Skip to main content

Upload Images With re-size Using PHP/MySQL


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.

  1. CREATE TABLE IF NOT EXISTS `location` (
  2. `id` int(11) NOT NULL AUTO_INCREMENT,
  3. `locations` varchar(100) NOT NULL,
  4. `height` int(11) NOT NULL,
  5. `width` int(11) NOT NULL,
  6. PRIMARY KEY (`id`)
  7. ) 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.

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Image Upload with resize</title>
  6. <style type="text/css">
  7. <!--
  8. body,td,th {
  9. font-family: Arial, Helvetica, sans-serif;
  10. color: #333333;
  11. font-size: 12px;
  12. }
  13.  
  14. .upload_message_success {
  15. padding:4px;
  16. background-color:#009900;
  17. border:1px solid #006600;
  18. color:#FFFFFF;
  19. margin-top:10px;
  20. margin-bottom:10px;
  21. }
  22.  
  23. .upload_message_error {
  24. padding:4px;
  25. background-color:#CE0000;
  26. border:1px solid #990000;
  27. color:#FFFFFF;
  28. margin-top:10px;
  29. margin-bottom:10px;
  30. }
  31.  
  32. -->
  33. </style></head>
  34.  
  35. <body>
  36.  
  37. <h1 style="margin-bottom: 0px">Submit an image</h1>
  38. <form action="resizeexec.php" method="post" enctype="multipart/form-data" name="image_upload_form" id="image_upload_form" style="margin-bottom:0px;">
  39. <label>Image file, maximum 4MB. it can be jpg, gif, png:</label><br />
  40. <input name="image_upload_box" type="file" id="image_upload_box" size="40" />
  41.  
  42.  
  43. <br />
  44. <br />
  45.  
  46.  
  47. <label>Scale down image? (2592 x 1944 px max):</label>
  48. <br />
  49. <input name="max_width_box" type="text" id="max_width_box" value="1024" size="4">
  50. x
  51.  
  52. <input name="max_height_box" type="text" id="max_height_box" value="768" size="4">
  53. px.
  54. <br />
  55. <br />
  56. <input name="submitted_form" type="hidden" id="submitted_form" value="image_upload_form" />
  57. <input type="submit" name="submit" value="Upload image" />
  58. </form>
  59. </body>
  60. </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.

  1. <?php
  2. $mysql_hostname = "localhost";
  3. $mysql_user = "root";
  4. $mysql_password = "";
  5. $mysql_database = "images";
  6. $prefix = "";
  7. $bd = mysql_connect($mysql_hostname, $mysql_user, $mysql_password) or die("Could not connect database");
  8. mysql_select_db($mysql_database, $bd) or die("Could not select database");
  9. ?>

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".

  1. <?php ini_set("memory_limit", "200000000"); // for large images so that we do not get "Allowed memory exhausted"?>
  2. <?php
  3. // upload the file
  4. if ((isset($_POST["submitted_form"])) && ($_POST["submitted_form"] == "image_upload_form")) {
  5.  
  6. // file needs to be jpg,gif,bmp,x-png and 4 MB max
  7. 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))
  8. {
  9.  
  10.  
  11. // some settings
  12. $max_upload_width = 2592;
  13. $max_upload_height = 1944;
  14.  
  15. // if user chosed properly then scale down the image according to user preferances
  16. if(isset($_REQUEST['max_width_box']) and $_REQUEST['max_width_box']!='' and $_REQUEST['max_width_box']<=$max_upload_width){
  17. $max_upload_width = $_REQUEST['max_width_box'];
  18. }
  19. if(isset($_REQUEST['max_height_box']) and $_REQUEST['max_height_box']!='' and $_REQUEST['max_height_box']<=$max_upload_height){
  20. $max_upload_height = $_REQUEST['max_height_box'];
  21. }
  22.  
  23.  
  24. // if uploaded image was JPG/JPEG
  25. if($_FILES["image_upload_box"]["type"] == "image/jpeg" || $_FILES["image_upload_box"]["type"] == "image/pjpeg"){
  26. $image_source = imagecreatefromjpeg($_FILES["image_upload_box"]["tmp_name"]);
  27. }
  28. // if uploaded image was GIF
  29. if($_FILES["image_upload_box"]["type"] == "image/gif"){
  30. $image_source = imagecreatefromgif($_FILES["image_upload_box"]["tmp_name"]);
  31. }
  32. // BMP doesn't seem to be supported so remove it form above image type test (reject bmps)
  33. // if uploaded image was BMP
  34. if($_FILES["image_upload_box"]["type"] == "image/bmp"){
  35. $image_source = imagecreatefromwbmp($_FILES["image_upload_box"]["tmp_name"]);
  36. }
  37. // if uploaded image was PNG
  38. if($_FILES["image_upload_box"]["type"] == "image/x-png"){
  39. $image_source = imagecreatefrompng($_FILES["image_upload_box"]["tmp_name"]);
  40. }
  41.  
  42.  
  43. $remote_file = "image_files/".$_FILES["image_upload_box"]["name"];
  44. imagejpeg($image_source,$remote_file,100);
  45. chmod($remote_file,0644);
  46.  
  47.  
  48.  
  49. // get width and height of original image
  50. list($image_width, $image_height) = getimagesize($remote_file);
  51.  
  52. if($image_width>$max_upload_width || $image_height >$max_upload_height){
  53. $proportions = $image_width/$image_height;
  54.  
  55. if($image_width>$image_height){
  56. $new_width = $max_upload_width;
  57. $new_height = round($max_upload_width/$proportions);
  58. }
  59. else{
  60. $new_height = $max_upload_height;
  61. $new_width = round($max_upload_height*$proportions);
  62. }
  63.  
  64. include('db.php');
  65. mysql_query("INSERT INTO location (locations, height, width) VALUES ('$remote_file','$new_height','$new_width')");
  66. $new_image = imagecreatetruecolor($new_width , $new_height);
  67. $image_source = imagecreatefromjpeg($remote_file);
  68.  
  69. imagecopyresampled($new_image, $image_source, 0, 0, 0, 0, $new_width, $new_height, $image_width, $image_height);
  70. imagejpeg($new_image,$remote_file,100);
  71.  
  72. imagedestroy($new_image);
  73. }
  74.  
  75. imagedestroy($image_source);
  76.  
  77.  
  78. header("Location: index.php");
  79. }
  80. else{
  81. header("Location: index.php");
  82. }
  83. }
  84. ?>

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:).

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Add new comment

CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.