title: Upload Image and insert in Database MySQl withAjax
body: <p>i m user JQuery mobile and PHP and Ajax to upload Image and insert it in Database,but i have a probleme in insert the name of image in a database,the result in database is :"C:fakepathLighthouse.jpg",i would insert just the name of image after upload it.
  Mu code in php</p>
  
  <pre><code>      &lt;?php // You need to add server side validation and better error handling here
  
       $data = array();
  
       if(isset($_GET['files']))
      {   
     $error = false;
     $files = array();
    £fichier=basename($file['name'];
     $uploaddir = 'photo/';
     foreach($_FILES as $file)
  
           {if(move_uploaded_file($file['tmp_name'], $uploaddir. $fichier)))                                                                                        
            {
                  $files[] = $uploaddir .$file['name'];
          }
          else
          {
            $error = true;
            }
                 }
              $data = ($error) ? array('error' =&gt; 'There was an error uploading your                                   files') : array('files' =&gt; $files);
                   }
          else
          {
     $data = array('success' =&gt; 'Form was submitted', 'formData' =&gt; $_POST);
           } 
  
        echo json_encode($data);
  
          ?&gt;
  </code></pre>
  
  <p>my code script:</p>
  
  <pre><code>        $(function()
          {
  // Variable to store your files
  var files;
  
  // Add events
  $('input[type=file]').on('change', prepareUpload);
  $('form').on('submit', uploadFiles);
  
  // Grab the files and set them to our variable
  function prepareUpload(event)
  {
      files = event.target.files;
  }
  
  // Catch the form submit and upload the files
  function uploadFiles(event)
  {
      event.stopPropagation(); // Stop stuff happening
      event.preventDefault(); // Totally stop stuff happening
  
      // START A LOADING SPINNER HERE
  
      // Create a formdata object and add the files
      var data = new FormData();
      $.each(files, function(key, value)
      {
          data.append(key, value);
      });
  
        $.ajax({
          url: 'submit.php?files',
          type: 'POST',
          data: data,
          cache: false,
          dataType: 'json',
          processData: false, // Don't process the files
          contentType: false, // Set content type to false as jQuery will tell the server   its a query string request
           success: function(data, textStatus, jqXHR)
            {
              if(typeof data.error === 'undefined')
              {
                  // Success so call function to process the form
                  submitForm(event, data);
              }
              else
              {
                  // Handle errors here
                  console.log('ERRORS: ' + data.error);
              }
          },
          error: function(jqXHR, textStatus, errorThrown)
          {
              // Handle errors here
              console.log('ERRORS: ' + textStatus);
              // STOP LOADING SPINNER
          }
      });
         }
  
     function submitForm(event, data)
    {
      // Create a jQuery object from the form
      $form = $(event.target);
  
      // Serialize the form data
      var formData = $form.serialize();
  
      // You should sterilise the file names
      $.each(data.files, function(key, value)
      {
          formData = formData + '&amp;filenames[]=' + value;
          console.log('nom de l image:' + '&amp;filenames[]=' + value);
      });
  
      $.ajax({
          url: 'submit.php',
          type: 'POST',
          data: formData,
          cache: false,
          dataType: 'json',
          success: function(data, textStatus, jqXHR)
          {
              if(typeof data.error === 'undefined')
              {
                  // Success so call function to process the form
                  console.log('SUCCESS: ' + data.success);
              }
              else
              {
                  // Handle errors here
                  console.log('ERRORS: ' + data.error);
              }
          },
          error: function(jqXHR, textStatus, errorThrown)
          {
              // Handle errors here
              console.log('ERRORS: ' + textStatus);
          },
          complete: function()
          {
              // STOP LOADING SPINNER
          }
      });
  }
     });
  </code></pre>
  
  <p>my initial page(index.html)</p>
  
  <pre><code>function getLocation(){
    if (navigator.geolocation) {
     navigator.geolocation.getCurrentPosition(successFunction, errorFunction);
   } 
   //Get the latitude and the longitude;
    function successFunction(position) {
  
  
       var latt = position.coords.latitude;
     var lngg = position.coords.longitude;
  var nom=$('input[id=nom]').val();
  var photo= $('input[id=file_upload]').val();
  var ville= $('input[id=ville]').val();
  var pays= $('input[id=pays]').val();
  long.value="Longitude: " + lngg;
     lat.value="Latitude: " + latt;
  
  //var adr="Sousse";
  codeLatLng(latt, lngg);
  // var adresse=codeLatLng(latt, lngg);
  
    var sendAjax = $.ajax({
      type: "POST",
      url: 'api.php?rquest=insertMosque',
     data:   'lat='+latt+'&amp;lng='+lngg+'&amp;nom='+nom+'&amp;pays='+pays+'&amp;ville='+ville+'&amp;photo='+photo,
      success: handleResponse
    });
  
    function handleResponse(){
    $('#answer').get(0).innerHTML = sendAjax.responseText;
    //console.log(data);
    }
  
  }
  
  function errorFunction(){
    alert("Geocoder failed");
  }
  }
  
  
  
  code api.php
     private function insertMosque() {
      if ($this-&gt;get_request_method() != "POST") {
          $this-&gt;response('', 406);
      }
  
      $nom = $_POST['nom'];
      $lat =($_POST['lat']);
   $lng = $_POST['lng'];
   $adr = $_POST['adr'];
   $ville = $_POST['ville'];
            $pays = $_POST['pays'];
  
  $photo=$_POST['photo'];
         //$photo =  addslashes($file['name']);
  
      $query = mysql_query("INSERT INTO mosque VALUES('', '$nom', '$lng','$lat',' $photo','$adr','$ville','$pays')", $this-&gt;db);
      if ($query) {
          $data['success'] = 'Insertion avec success';
      } else {
          $data['errors'] = 'failed';
      }
      $this-&gt;response($this-&gt;json($data), 200);
    }
  </code></pre>