title: Upload file and insert data to database with php and jquery/ajax
body: <p>Hi am trying to upload an image and insert data into items table ( phpmyadmin )  It works if i don't user ajax but when i tried to upload using ajax it didn't work</p>
  
  <p>This is my html5 script </p>
  
  <pre><code>&lt;form id="InsertItemTodatabase" enctype="multipart/form-data" action="requests/newItem.php" method="post" class="add-new-item-form-form"&gt;
  
                      &lt;div class="form-group"&gt;
                          &lt;input type="text" name="itemName" placeholder="Item name" class="form-control" id="itemNameJs"&gt;
                      &lt;/div&gt;
  
                      &lt;div class="form-group"&gt;
                          &lt;input type="text" name="itemDesc" placeholder="Item Description" class="form-control" id="itemDescJs"&gt;
                      &lt;/div&gt;
  
                      &lt;div class="form-group"&gt;
                          &lt;input type="text" name="itemPrice" placeholder="Item Price" class="form-control" id="itemPriceJs"&gt;
                      &lt;/div&gt;
  
  
                      &lt;div class="form-group"&gt;
                          &lt;?php $fetch = fetchData( '*', 'category', '' , '', '', $fetch="fetchAll" ); ?&gt;
  
                          &lt;select class="form-control" name="category" id="itemCatJs"&gt;
                              &lt;option value="0"&gt;Select Category&lt;/option&gt;
                              &lt;?php 
  
                                  foreach ($fetch as $data) {
                                      echo '&lt;option value="' . $data[ 'cat_id' ] . '"&gt;' . $data[ 'cat_name' ] . '&lt;/option&gt;';
                                  }
  
                              ?&gt;
  
                          &lt;/select&gt;
  
                      &lt;/div&gt;
  
  
                      &lt;div class="form-group"&gt;
                          &lt;input type="text" name="itemAmount" placeholder="Amount" class="form-control" id="itemAmountJs"&gt;
                      &lt;/div&gt;
  
                      &lt;div class="form-group"&gt;
                          &lt;label for="uploadItemPic" class="btn btn-primary"&gt;Upload Item Picture&lt;/label&gt;
                          &lt;input type="file" id="uploadItemPic" name="itemPic" class="form-control"&gt;
                      &lt;/div&gt;
  
                      &lt;div class="form-group"&gt;
                          &lt;button type="submit" name="submitAddItemForm" id="submitNow"&gt;
                              &lt;i class="ti-plus"&gt;&lt;/i&gt;
                              Add Item
                          &lt;/button&gt;
                      &lt;/div&gt;
  
                  &lt;/form&gt;&lt;!-- /.add-new-item-form-form --&gt;
  </code></pre>
  
  <p>And this is my jQuery/Ajax script for uplaoding data. </p>
  
  <pre><code>$(document).on( 'submit', '#InsertItemTodatabase', function(e){
      e.preventDefault();
  
      var file_data = $('#uploadItemPic').prop('files')[0],
          name      = $( '#itemNameJs' ).val(),
          desc      = $( '#itemDescJs' ).val(),
          price     = $( '#itemPriceJs' ).val(),
          cat       = $( '#itemCatJs option:selected' ).val(),
          amount    = $( '#itemAmountJs' ).val(),
          image     = $( '#uploadItemPic' ).val();
  
          var file = new FormData();
          file.append('file',$('#uploadItemPic')[0].files[0]);
  
      var ajaxUrl = $(this).attr('action');
      alert(file);                             
      $.ajax({
          url: ajaxUrl, // point to server-side PHP script 
          type: 'POST',
          dataType: 'text',  // what to expect back from the PHP script, if anything
          cache: false,
          contentType: false,
          processData: false,
          data: {
                  name   : name,
                  desc   : desc,
                  price  : price,
                  cat    : cat,
                  amount : amount,
                  image  : image,
                  file
  
               },                         
  
          success: function(php_script_response){
              alert(php_script_response); // display response from the PHP script, if any
          }
       });
  
  });
  </code></pre>
  
  <p>And this is my newItem.php</p>
  
  <pre><code>&lt;?php
  
  
  if( $_SERVER[ 'REQUEST_METHOD' ] == 'POST' ){
  
      include "../database\connect.php";
  
      $item_name     = $_POST[ 'itemName' ];
      $item_desc     = $_POST[ 'itemDesc' ];
      $item_price    = $_POST[ 'itemPrice' ];
      $item_amount   = $_POST[ 'itemAmount' ];
      $item_category = $_POST[ 'category' ];
  
  
      $formErrors = array();
  
      if( empty( $item_name ) ){
          $formErrors[] = 'You should type the item name'; 
      }
      if( empty( $item_desc ) ){
          $formErrors[] = 'You should add item description';
      }
      if( empty( $item_price ) ){
          $formErrors[] = 'You should add item price';
      }
      if( empty( $item_amount ) ){
          $formErrors[] = 'You should type item amount';
      }
      if( $item_category == 0 ){
          $formErrors[] = 'You should select item category';
      }
  
  
      $item_picture = $_FILES[ 'itemPic' ];
      $picture_name = $item_picture[ 'name' ];
      $picture_temp = $item_picture[ 'tmp_name' ];
      $picture_size = $item_picture[ 'size' ];
      $picture_type = $item_picture[ 'type' ];
  
      if( empty( $picture_name ) ){
          $formErrors[] = 'You should select item picture';
      }
  
  
  
      /*
  
          Picture Extension
          -------------------
  
      */
  
  
          $extensions = array( "png", "jpg", "jpeg", "gif" );
  
          $picture_name_explosion = explode('.', $picture_name);
          $extension_name = end( $picture_name_explosion );
          $extension = strtolower( $extension_name );
  
  
          if( !in_array($extension, $extensions) &amp;&amp; !empty( $picture_name ) ){
              $formErrors[] = 'This extension is not allowed';
          }
          if($picture_size &gt; 4194304){
              $formErrors[] = 'Image Can\'t Be Larger Than 4MB';
          }
  
          if( empty( $formErrors ) ){
  
              $item_image = rand( 0, 1000000 ) . '_' . $picture_name;
              move_uploaded_file($picture_temp, '../layouts/images/items' . $item_image);
  
              $stmt = $db-&gt;prepare( "INSERT INTO Items( item_name, item_description, item_pic, item_price, amount,    added_date, cat_id ) VALUES( :zname, :zdesc, :zpic, :zprice, :zamount, :zdate, :zcat ) " );
  
              $stmt-&gt;execute( array(
  
                  'zname'   =&gt; $item_name,
                  'zdesc'   =&gt; $item_desc,
                  'zpic'    =&gt; $item_image,
                  'zprice'  =&gt; '$' . $item_price,
                  'zamount' =&gt; $item_amount,
                  'zdate'   =&gt; date( 'Y-m-d h:i:s' ),
                  'zcat'    =&gt; $item_category
  
              ) );
              echo date( 'Y-m-d h:i:s' );
          }
  
          foreach ($formErrors as $error) {
              var_dump( $error );
          }
  }
  </code></pre>
  
  <p>When i tried to upload i get an error that $_POST data is not defined in newItem.php</p>
  
  <p>Please help me in that, And thanks in advance!</p>