insert image into database with ajax using formData

Question

I'm having some difficulties with uploading an image from an html form. the form should be able to send the image name with other data to php page.

I used formData instead of serialized function, since it can't handle files data.

$(document).on('click', '#btn_add', function(){
    var formData = new FormData($(this)[0]);

    $.ajax({
        url:"includes/widgets/insert.php",
        type: 'POST',
        data: formData,
        async: false,
        cache: false,
        contentType: false,
        processData: false
        success: function (data) {
            alert(data);

        },

    });

    return false;
});

html form

 <form id="insert_post" action="includes/widgets/insert.php" method="post" enctype="multipart/form-data" >


         <div class="row">
             <div class="medium-6 columns">
                 <label>First name
                     <input type="text" name="first_name" id="first_name" contenteditable>
                 </label>
             </div>
             <div class="medium-6 columns">
                 <label>Last name
                     <input type="text" name="last_name" id="last_name" contenteditable>
                 </label>
             </div>

             <div class="medium-12 columns">
                 <label>Last name
                 <input  type="file" name="file" id="image" multiple contenteditable>
                 </label>
             </div>
             </div>
              <button type="button" name="btn_add" id="btn_add" class="button btn btn-xs btn-success" >Submit</button>


     </form>

php page

<?php
$connect = mysqli_connect("localhost", "root", "", "myaddboard");

echo $_POST['first_name'];
echo $_POST['last_name'];


echo $image = $_FILES['file']['name'];
echo $image_tmp = $_FILES['file']['tmp_name'];
/*
if(empty($image)){
    echo 'error';
}

move_uploaded_file($image_tmp,"img/$image");
  //$sql = "INSERT INTO posts(post_content, post_author) VALUES('".$_POST["first_name"]."', '".$_POST["last_name"]."')";

if(mysqli_query($connect, $sql))
{
    echo 'Data Inserted';
} else {
    echo 'error';
}
*/
?>

The php form is just to test if the ajax send the data correctly.

When I click on the button I always get errors that the php variables is not defined

The errors i get each time I submit the form

undefined index: frist_name in c:xampp\htdocs\unv\includes\widgets\insert.php on line 4
undefined index: last_name in c:xampp\htdocs\unv\includes\widgets\insert.php on line 5
undefined index: file in c:xampp\htdocs\unv\includes\widgets\insert.php on line 8
undefined index: file in c:xampp\htdocs\unv\includes\widgets\insert.php on line 9

what should I do to make the ajax send the data to the php page ?

What is the error .. please post

Pardeep Poria
– Pardeep Poria

2016-05-13 17:12:03 +00:00
Commented May 13, 2016 at 17:12 — Pardeep Poria
– Pardeep Poria, Commented May 13, 2016 at 17:12
I updated question. Thank you

Ahmadz Issa
– Ahmadz Issa

2016-05-13 17:16:53 +00:00
Commented May 13, 2016 at 17:16 — Ahmadz Issa
– Ahmadz Issa, Commented May 13, 2016 at 17:16

Ohgodwhy · Accepted Answer · 2016-05-13 17:16:19Z

2

This won't work because of how your selector is created.

$(document).on('click', '#btn_add', function(){
var formData = new FormData($(this)[0]);

In the above scenario, $(this)[0] is getting you the raw HTML interpretation of the button.

What you actually want is to change your button to a submit type, capture the form submit event, and then process your request.

button type="submit" <-- change

$(document).on('submit', '#insert_post', function(e){
    e.preventDefault(); //stop default form submission

    //do the rest of your stuff here
});

Now $(this)[0] is actually the form and not the button.

answered May 13, 2016 at 17:16

Ohgodwhy

50.9k11 gold badges86 silver badges114 bronze badges

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

1 Comment

Ahmadz Issa Over a year ago

mm it work like a charm thank you very much. Last time I tried the submit type, it always direct me to action page so I used button instead. but it working now as it should. Thanks again .

Collectives™ on Stack Overflow

insert image into database with ajax using formData

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related