title: Multiple image upload by PHP and save all image's name in one row of a table in mysql
body: <p>I have a php upload script which have 2 files to process uploaded image.
  the first file contain html form and ajax script. this script work fine for uploading one image and save the image name and image patch to mysql table.</p>
  
  <p>look at the codes:</p>
  
  <p><strong>Upload.php:</strong></p>
  
  <pre><code>&lt;?php    
  if($loggedin) {
      $contents = "
  &lt;frame&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" /&gt;
  &lt;title&gt;Ajax Upload and Resize with jQuery and PHP - Demo&lt;/title&gt;
  &lt;script type=\"text/javascript\" src=\"Images/js/jquery-1.10.2.min.js\"&gt;&lt;/script&gt;
  &lt;script type=\"text/javascript\" src=\"Images/js/jquery.form.min.js\"&gt;&lt;/script&gt;
  
  &lt;script type=\"text/javascript\"&gt;
  $(document).ready(function() { 
  
      var progressbox     = $('#progressbox');
      var progressbar     = $('#progressbar');
      var statustxt       = $('#statustxt');
      var completed       = '0%';
  
      var options = { 
              target:   '#output',   // target element(s) to be updated with server response 
              beforeSubmit:  beforeSubmit,  // pre-submit callback 
              uploadProgress: OnProgress,
              success:       afterSuccess,  // post-submit callback 
              resetForm: true        // reset the form after successful submit 
          }; 
  
       $('#MyUploadForm').submit(function() { 
              $(this).ajaxSubmit(options);            
              // return false to prevent standard browser submit and page navigation 
              return false; 
          });
  
  //when upload progresses    
  function OnProgress(event, position, total, percentComplete)
  {
      //Progress bar
      progressbar.width(percentComplete + '%') //update progressbar percent complete
      statustxt.html(percentComplete + '%'); //update status text
      if(percentComplete&gt;50)
          {
              statustxt.css('color','#fff'); //change status text to white after 50%
          }
  }
  
  //after succesful upload
  function afterSuccess()
  {
      $('#submit-btn').show(); //hide submit button
      $('#loading-img').hide(); //hide submit button
  
  }
  
  //function to check file size before uploading.
  function beforeSubmit(){
      //check whether browser fully supports all File API
     if (window.File &amp;&amp; window.FileReader &amp;&amp; window.FileList &amp;&amp; window.Blob)
      {
  
          if( !$('#imageInput').val()) //check empty input filed
          {
              $(\"#output\").html(\"Are you kidding me?\");
              return false
          }
  
          var fsize = $('#imageInput')[0].files[0].size; //get file size
          var ftype = $('#imageInput')[0].files[0].type; // get file type
  
          //allow only valid image file types 
          switch(ftype)
          {
              case 'image/png': case 'image/gif': case 'image/jpeg': case 'image/pjpeg':
                  break;
              default:
                  $(\"#output\").html(\"&lt;b&gt;\"+ftype+\"&lt;/b&gt; Unsupported file type!\");
                  return false
          }
  
          //Allowed file size is less than 1 MB (1048576)
          if(fsize&gt;8388608) 
          {
              $(\"#output\").html(\"&lt;b&gt;\"+bytesToSize(fsize) +\"&lt;/b&gt; Too big Image file! &lt;br /&gt;Please reduce the size of your photo using an image editor.\");
              return false
          }
  
          //Progress bar
          progressbox.show(); //show progressbar
          progressbar.width(completed); //initial value 0% of progressbar
          statustxt.html(completed); //set status text
          statustxt.css('color','#000'); //initial color of status text
  
  
          $('#submit-btn').hide(); //hide submit button
          $('#loading-img').show(); //hide submit button
          $(\"#output\").html(\"\");  
      }
      else
      {
          //Output error to older unsupported browsers that doesn't support HTML5 File API
          $(\"#output\").html(\"Please upgrade your browser, because your current browser lacks some new features we need!\");
          return false;
      }
  }
  
  //function to format bites bit.ly/19yoIPO
  function bytesToSize(bytes) {
     var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
     if (bytes == 0) return '0 Bytes';
     var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
     return Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[i];
  }
  
  }); 
  
  &lt;/script&gt;
  &lt;link href=\"Images/style/style.css\" rel=\"stylesheet\" type=\"text/css\"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id=\"upload-wrapper\"&gt;
  &lt;div align=\"center\"&gt;
  &lt;h3&gt;Upload your Image&lt;/h3&gt;
  &lt;span class=\"\"&gt;Image Type allowed: Jpeg, Jpg, Png and Gif. | Maximum Size 8 MB&lt;/span&gt;
  &lt;form action=\"Process.php\" onSubmit=\"return false\" method=\"post\" enctype=\"multipart/form-data\" id=\"MyUploadForm\"&gt;
  &lt;input name=\"ImageFile\" id=\"imageInput\" type=\"file\" /&gt;
  &lt;input type=\"submit\"  id=\"submit-btn\" value=\"Upload\" /&gt;
  &lt;img src=\"Images/images/ajax-loader.gif\" id=\"loading-img\" style=\"display:none;\" alt=\"Please Wait\"/&gt;
  &lt;/form&gt;
  &lt;div id=\"progressbox\" style=\"display:none;\"&gt;&lt;div id=\"progressbar\"&gt;&lt;/div &gt;&lt;div id=\"statustxt\"&gt;0%&lt;/div&gt;&lt;/div&gt;
  &lt;div id=\"output\"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  &lt;/frame&gt;
                  ";
  }else header("Location: login.php?return=upload.php");
  ?&gt;
  </code></pre>
  
  <p>And, this file is for processing the submitted form:</p>
  
  <p><strong>Process.php:</strong></p>
  
  <pre><code>&lt;?php
  if(isset($_POST))
  {
      ############ Edit settings ##############
      $ThumbSquareSize        = 100; //Thumbnail will be 200x200
      $BigImageMaxSize        = 300; //Image Maximum height or width
      $ThumbPrefix            = "thumb_"; //Normal thumb Prefix
      $DestinationDirectory   = '/www/site/Images/uploads/'; //specify upload directory ends with / (slash)
      $Quality                = 90; //jpeg quality
      ##########################################
  
      //check if this is an ajax request
      if (!isset($_SERVER['HTTP_X_REQUESTED_WITH'])){
          die();
      }
  
      // check $_FILES['ImageFile'] not empty
      if(!isset($_FILES['ImageFile']) || !is_uploaded_file($_FILES['ImageFile']['tmp_name']))
      {
              die('Something wrong with uploaded file, something missing!'); // output error when above checks fail.
      }
  
      // Random number will be added after image name
      $RandomNumber   = rand(0, 9999999999999); 
  
      $ImageName      = str_replace(' ','-',strtolower($_FILES['ImageFile']['name'])); //get image name
      $ImageSize      = $_FILES['ImageFile']['size']; // get original image size
      $TempSrc        = $_FILES['ImageFile']['tmp_name']; // Temp name of image file stored in PHP tmp folder
      $ImageType      = $_FILES['ImageFile']['type']; //get file type, returns "image/png", image/jpeg, text/plain etc.
  
      //Let's check allowed $ImageType, we use PHP SWITCH statement here
      switch(strtolower($ImageType))
      {
          case 'image/png':
              //Create a new image from file 
              $CreatedImage =  imagecreatefrompng($_FILES['ImageFile']['tmp_name']);
              break;
          case 'image/gif':
              $CreatedImage =  imagecreatefromgif($_FILES['ImageFile']['tmp_name']);
              break;          
          case 'image/jpeg':
          case 'image/pjpeg':
              $CreatedImage = imagecreatefromjpeg($_FILES['ImageFile']['tmp_name']);
              break;
          default:
              die('Unsupported File!'); //output error and exit
      }
  
      //PHP getimagesize() function returns height/width from image file stored in PHP tmp folder.
      //Get first two values from image, width and height. 
      //list assign svalues to $CurWidth,$CurHeight
      list($CurWidth,$CurHeight)=getimagesize($TempSrc);
  
      //Get file extension from Image name, this will be added after random name
      $ImageExt = substr($ImageName, strrpos($ImageName, '.'));
      $ImageExt = str_replace('.','',$ImageExt);
  
      //remove extension from filename
      $ImageName      = preg_replace("/\\.[^.\\s]{3,4}$/", "", $ImageName); 
  
      //Construct a new name with random number and extension.
      $NewImageName = $ImageName.'-'.$RandomNumber.'.'.$ImageExt;
      $NewThumbImageName = $ThumbPrefix.$NewImageName;
  
      //set the Destination Image
      $thumb_DestRandImageName    = $DestinationDirectory.$ThumbPrefix.$NewImageName; //Thumbnail name with destination directory
      $DestRandImageName          = $DestinationDirectory.$NewImageName; // Image with destination directory
  
      //Resize image to Specified Size by calling resizeImage function.
      if(resizeImage($CurWidth,$CurHeight,$BigImageMaxSize,$DestRandImageName,$CreatedImage,$Quality,$ImageType))
      {
          //Create a square Thumbnail right after, this time we are using cropImage() function
          if(!cropImage($CurWidth,$CurHeight,$ThumbSquareSize,$thumb_DestRandImageName,$CreatedImage,$Quality,$ImageType))
              {
                  echo 'Error Creating thumbnail';
              }
          /*
          We have succesfully resized and created thumbnail image
          We can now output image to user's browser or store information in the database
          */
  
          // Insert info into database table!
      $chkquery = mysql_query("SELECT * FROM `ID_Card` WHERE `UserName`='{$ir['username']}'")or die(mysql_error());
          if(mysql_num_rows($chkquery) &gt; 0){
  
              while($chkquerys = @mysql_fetch_array($chkquery)){
              $answer=$chkquerys['Approved'];
                  if($answer == 1) {
                          echo '&lt;table width="100%" border="0" cellpadding="4" cellspacing="0"&gt;';
                          echo '&lt;tr&gt;';
                          echo '&lt;td align="center"&gt; some text:&lt;br&gt;&lt;br&gt; &lt;img src="'.$chkquerys['ImageName'].'" alt="Image"&gt;&lt;/td&gt;';
                          echo '&lt;/tr&gt;';
                          echo '&lt;/table&gt;';
                          die();
  
                  }if($answer == 0) {
                          echo '&lt;table width="100%" border="0" cellpadding="4" cellspacing="0"&gt;';
                          echo '&lt;tr&gt;';
                          echo '&lt;td align="center"&gt; some text:&lt;br&gt;&lt;br&gt; &lt;img src="'.$chkquerys['ImagePath'].''.$chkquerys['ImageName'].'" alt="Image"&gt;&lt;/td&gt;';
                          echo '&lt;/tr&gt;';
                          echo '&lt;/table&gt;';
                          die();
                  }
  
              }
          }   else{
          /* DB Connect code goes here... */
          mysql_query("INSERT INTO `Images`(Id,`UserName`,`ImageName`,`ThumbName`,`ImagePath`,`Approved`,`Ip`,`Date`)
          VALUES (Null,'Null','$NewImageName','$NewThumbImageName','Images/uploads/','0','IP',unix_timestamp())")or die(mysql_error());}
  
          echo '&lt;table width="100%" border="0" cellpadding="4" cellspacing="0"&gt;';
          echo '&lt;tr&gt;';
          echo '&lt;td align="center"&gt;Dear '.$ir['username'].', your Image was uploaded successfully. please waiting for review and verify.&lt;/td&gt;';
          echo '&lt;/tr&gt;&lt;tr&gt;';
          echo '&lt;td align="center"&gt;&lt;img src="Images/uploads/'.$NewImageName.'" alt="Resized Image"&gt;&lt;/td&gt;';
          echo '&lt;/tr&gt;';
          echo '&lt;/table&gt;';
  
  
          }else{
          die('Resize Error'); //output error
      }
  }
  
  
  // This function will proportionally resize image 
  function resizeImage($CurWidth,$CurHeight,$MaxSize,$DestFolder,$SrcImage,$Quality,$ImageType)
  {
      //Check Image size is not 0
      if($CurWidth &lt;= 0 || $CurHeight &lt;= 0) 
      {
          return false;
      }
  
      //Construct a proportional size of new image
      $ImageScale         = min($MaxSize/$CurWidth, $MaxSize/$CurHeight); 
      $NewWidth           = ceil($ImageScale*$CurWidth);
      $NewHeight          = ceil($ImageScale*$CurHeight);
      $NewCanves          = imagecreatetruecolor($NewWidth, $NewHeight);
  
      // Resize Image
      if(imagecopyresampled($NewCanves, $SrcImage,0, 0, 0, 0, $NewWidth, $NewHeight, $CurWidth, $CurHeight))
      {
          switch(strtolower($ImageType))
          {
              case 'image/png':
                  imagepng($NewCanves,$DestFolder);
                  break;
              case 'image/gif':
                  imagegif($NewCanves,$DestFolder);
                  break;          
              case 'image/jpeg':
              case 'image/pjpeg':
                  imagejpeg($NewCanves,$DestFolder,$Quality);
                  break;
              default:
                  return false;
          }
      //Destroy image, frees memory   
      if(is_resource($NewCanves)) {imagedestroy($NewCanves);} 
      return true;
      }
  
  }
  
  //This function corps image to create exact square images, no matter what its original size!
  function cropImage($CurWidth,$CurHeight,$iSize,$DestFolder,$SrcImage,$Quality,$ImageType)
  {    
      //Check Image size is not 0
      if($CurWidth &lt;= 0 || $CurHeight &lt;= 0) 
      {
          return false;
      }
  
      //abeautifulsite.net has excellent article about "Cropping an Image to Make Square bit.ly/1gTwXW9
      if($CurWidth&gt;$CurHeight)
      {
          $y_offset = 0;
          $x_offset = ($CurWidth - $CurHeight) / 2;
          $square_size    = $CurWidth - ($x_offset * 2);
      }else{
          $x_offset = 0;
          $y_offset = ($CurHeight - $CurWidth) / 2;
          $square_size = $CurHeight - ($y_offset * 2);
      }
  
      $NewCanves  = imagecreatetruecolor($iSize, $iSize); 
      if(imagecopyresampled($NewCanves, $SrcImage,0, 0, $x_offset, $y_offset, $iSize, $iSize, $square_size, $square_size))
      {
          switch(strtolower($ImageType))
          {
              case 'image/png':
                  imagepng($NewCanves,$DestFolder);
                  break;
              case 'image/gif':
                  imagegif($NewCanves,$DestFolder);
                  break;          
              case 'image/jpeg':
              case 'image/pjpeg':
                  imagejpeg($NewCanves,$DestFolder,$Quality);
                  break;
              default:
                  return false;
          }
      //Destroy image, frees memory   
      if(is_resource($NewCanves)) {imagedestroy($NewCanves);} 
      return true;
  
      }
  
  }
  </code></pre>
  
  <p>As I said this Script works prefect for one file...
  But, how can I change it to work with 3 differents image field? (all fields are required.)</p>
  
  <p>I want to upload 3 images and save all the uploaded image to one row of a table in database.
  for example, I want to have these 3 fields in my form:</p>
  
  <pre><code>&lt;label&gt;Image #1:&lt;/label&gt;&lt;input name="ImageFile1" type="file" &gt;
  &lt;label&gt;Image #2:&lt;/label&gt;&lt;input name="ImageFile2" type="file" &gt;
  &lt;label&gt;Image #3:&lt;/label&gt;&lt;input name="ImageFile3" type="file" &gt;
  </code></pre>
  
  <p>after submitting the form, proccess.php upload files and save the name of images in one same row. 
  for example:</p>
  
  <pre><code>mysql_query("INSERT INTO `Images`(Id,`UserName`,`ImageName1`,`ImageName2`,`ImageName3`,`ImagePath`,`Approved`,`Ip`,`Date`)
                             VALUES (Null,'Null','$ImageName1','$ImageName2','$ImageName3','Images/uploads/','0','IP',unix_timestamp())")or die(mysql_error());}
  </code></pre>
  
  <p>Is that possible to do? 
  Thank you :)</p>