Upload Image and insert in Database MySQl withAjax - php

Question

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
<?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' => 'There was an error uploading your files') : array('files' => $files);
}
else
{
$data = array('success' => 'Form was submitted', 'formData' => $_POST);
}
echo json_encode($data);
?>
my code script:
$(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 + '&filenames[]=' + value;
console.log('nom de l image:' + '&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
}
});
}
});
my initial page(index.html)
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+'&lng='+lngg+'&nom='+nom+'&pays='+pays+'&ville='+ville+'&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->get_request_method() != "POST") {
$this->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->db);
if ($query) {
$data['success'] = 'Insertion avec success';
} else {
$data['errors'] = 'failed';
}
$this->response($this->json($data), 200);
}

Answer 1

You could use the explode function in your api.php to parse the filepath you are getting from POST:
$nom = $_POST['nom'];
$lat =($_POST['lat']);
$lng = $_POST['lng'];
$adr = $_POST['adr'];
$ville = $_POST['ville'];
$pays = $_POST['pays'];
//for example, say $_POST['photo'] = "C:/my/fake/directory/testfile.jpg"
$photopath = explode("/", $_POST['photo']);
//print_r($photopath) results in Array ( [0] => C: [1] => my [2] => fake [3] => directory [4] => testfile.jpg )
$photo = end($photopath); //gets last result in the array (your filename)
$query = mysql_query("INSERT INTO mosque VALUES('', '$nom', '$lng','$lat',' $photo','$adr','$ville','$pays')", $this->db);
Please note that this may not be the most efficient method of getting the filename from a path, and your delimiter ("/" in the example above) might need to change based on how you are getting your path. If you have any questions feel free to ask.