Uploading image and data using ajax and php

Question

I am trying to upload firstname, lastname, description and image path to MySql database. And move uploaded image to specific folder.

Here is my ajax function

formData = new FormData(addPeopleForm);
var file_data = $('input[type="file"]')[0].file;
formData.append("file", file_data);

$.ajax({
  type: "POST",
  url: "functions.php",
  contentType: false,
  cache: false,
  processData: false,
  data: {
    function: "savepeople",
    data: formData
  }, success: function(data){
      console.log(data);
      getPeople();
  }

});

functions.php

if(isset($_POST['function'])){
 $f = $_POST['function'];

 if($f == "savepeople"){
  require_once("config.php");   
  echo $_POST['firstname'];
  .
  .
  .

I just did that and everything worked out fine :) Thanks anyway :) — Troutfisher
– Troutfisher, Commented Jun 9, 2017 at 10:38

Gaurang Sondagar · Accepted Answer · 2017-06-09 09:40:44Z

1

you can not send directly image to php file with ajax call, you have to take form enctype="multipart/form-data" while form defination

and replace this code for file upload while ajax call

for appending file in formdata use below code

formData = new FormData(); //your form name 
var file_data = $('input[type="file"]')[0].file;
formData.append("file", file_data);
formData.append("function","savepeople"); // new variable for your php condition



$.ajax({
    url: "YOUR_FILE_PATH",
    type: "POST",
    data: formData,
    contentType: false,
    cache: false,
    processData: false,
    success: function(data) {
    // success operation here
    },

and on php side you have to use $_FILES['YOUR_FILE_NAME'] instead of $_POST['YOUR_FILE_NAME'] for accessing a uploaded file on server.

edited Jun 9, 2017 at 9:40

answered Jun 9, 2017 at 9:03

Gaurang Sondagar

3092 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Troutfisher Over a year ago

Okay, so how do I echo firstname? echo $_POST['firstname']?

Gaurang Sondagar Over a year ago

yes , you are right , you can echo firstname value using echo $_POST['firstname'];

Troutfisher Over a year ago

Well I can't simply. I am calling specific php functions using ajax by passing function POST value as data, but with formdata I can't do that so I don't have anyway to call specific function. See my php function again, I edited it little bit to make more sense.

Gaurang Sondagar Over a year ago

you can add as many data as you want in formdata by appending in formdata as a get variable

Gaurang Sondagar Over a year ago

see my new code to know how to pass function value as a new variable

|

Ravi Parmar · Accepted Answer · 2017-06-09 09:37:22Z

0

you can try this code

$.ajax({
    type:'POST',
    url:'functions.php',     
    data:new FormData($('#my_form')[0]),
    cache: false,
    contentType: false,
    processData: false,
    success:function(msg)
    {
         console.log(msg);
    }
});
return false;

where #my_form is your form id

answered Jun 9, 2017 at 9:37

Ravi Parmar

812 silver badges11 bronze badges

3 Comments

Troutfisher Over a year ago

This would work but not in my case, since I am passing two variables to php, first decides which if statement to run and second holds all the data.

Masivuye Cokile Over a year ago

@Troutfisher which two variables are you passing?

Troutfisher Over a year ago

data: { function: "savepeople", data: formData },

Masivuye Cokile · Accepted Answer · 2017-06-09 09:51:41Z

0

var formData = new FormData($(this)[0]);
var action = "savepeople";

    $.ajax({
        url  : 'functions.php',
    type : 'POST',
    data: {action:action,formData:formData},
    contentType: false,
    cache: false,
    processData:false,
    async : false,
    , success: function(data){
console.log(data);
getPeople();
}
});

functions.php

if(isset($_POST['action']) && $_POST['action'] == "savepeople"){


    //TO DO CODE
}

answered Jun 9, 2017 at 9:51

Masivuye Cokile

4,7733 gold badges22 silver badges35 bronze badges

Collectives™ on Stack Overflow

Uploading image and data using ajax and php

3 Answers 3

6 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related