file uploading and data insertion using ajax

Question

my problem is, when i am sending data to mysql database without file-upload it's successfully inserted to database, but when i m using insert data along with file-upload it's not working, and no data received by post.js file to

success:function(data)
{
   alert(data);
}

post.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AdPortal</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="container">
        <div class="header">
        </div>
        <div class="nav">
            <ul class="nav_link">
                <div class="nav_link_div"><a href="http://localhost/adportal/index.html"><li class="nav_link_list">HOME</li></a></div>
                <div class="nav_link_div"><a href="#"><li class="nav_link_list">POST AD</li></a></div>
                <div class="nav_link_div"><a href="#"><li class="nav_link_list">CONTACT US</li></a></div>
                <div class="nav_link_div"><a href="#"><li class="nav_link_list">ABOUT</li></a></div>
            </ul>
        </div>
        <div class="post_table">

            <form method="post" enctype="multipart/form-data">  
                <table>
                    <tr>
                        <td>
                            Ad Title of Post:
                        </td>
                        <td>
                            <input type="text" id="ad_title">
                        </td>
                    </tr>


                    <tr>
                        <td>
                            Price:  
                        </td>
                        <td>
                            <input type="text" id="price">
                        </td>
                    </tr>

                    <tr>
                        <td>
                            Model:
                        </td>
                        <td>
                            <input type="text" id="model">
                        </td>
                    </tr>

                        <!-- <td>
                            <input type="button" id="upload" value="Upload" />
                        </td> -->
                    </tr>
                    <tr>
                        <td>
                            Ad description:
                        </td>
                        <td>
                            <textarea rows="5" cols="21" id="description"></textarea>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Name:
                        </td>
                        <td>
                            <input type="text" id="name">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Email:
                        </td>
                        <td>
                            <input type="text" id="email">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Phone:
                        </td>
                        <td>
                            <input type="text" id="phone">
                        </td>
                    </tr>
                    <tr/>
                    <td>
                        City:
                    </td>
                    <td>
                        <input type="text" id="city">
                    </td>
                </tr>
                <tr>
                    <td>Add Image</td>
                    <td>
                        <input id="file" type="file" />
                    </td>
                    <tr>
                        <td></td>
                        <td>
                            <button type="submit" id="ad_btn">Submit Post</button>
                        </td>
                    </tr>
                </table>
            </form>
        </div>
    </div>
    <script src="js/jquery.js"></script>
    <script src="js/post.js"></script>

</body>
</html>

post.js

$(document).ready(function(){
    $("#ad_btn").on('click', function(){


        var title  = $("#ad_title").val();
        var price  = $("#price").val();
        var model = $("#model").val();
        var description = $("#description").val();
        var name  = $("#name").val();
        var email = $("#email").val();
        var phone= $("#phone").val();
        var city= $("#city").val();


        var file_data = $('#file').prop('files')[0];   
        var form_data = new FormData();                  
        form_data.append('file', file_data);



        $.ajax({
            url:'php/post.php',
            type:'POST',
            data:form_data,

            success:function(data)
            {
                alert(data);
            }
        });

    });
});

post.php

<?php
require_once 'database.php';
move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/' . $_FILES['file']['name']);
if (0 < $_FILES['file']['error']) {
    echo 'Error: ' . $_FILES['file']['error'] . '<br>';
} else {

}


echo "done";
$id = NULL;
$title = $_POST['title'];
$price = $_POST['price'];
$model = $_POST['model'];
$description = $_POST['description'];
$name = $_POST['name'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$city = $_POST['city'];



$stmt = $dbh->prepare("INSERT INTO posts VALUES (?,?,?,?,?,?,?,?,?)");
$stmt->execute(array($id,$title, $price, $model, $description,  $name, $email, $phone, $city));

Have you tried the steps outlined in this question: http://stackoverflow.com/questions/2320069/jquery-ajax-file-upload? — Rory McCrossan, Jun 29 '15 at 07:08
For better explanation you may also visit this link http://stackoverflow.com/questions/5392344/sending-multipart-formdata-with-jquery-ajax — PHP Worm..., Jun 29 '15 at 07:13
btw, don't send a file **INTO** the database, save it on your server and place a pointer in your database to that file, otherwise the database will become huge later on. — odedta, Jun 29 '15 at 07:18
Pass other data by appending it to `form_data` like `form_data.append('name','value')` — Guruprasad J Rao, Jun 29 '15 at 07:57

score 0 · Answer 1 · answered Jun 29 '15 at 07:22

Try:

$(document).ready(function(){
    $("#ad_btn").on('click', function(){


        var title  = $("#ad_title").val();
        var price  = $("#price").val();
        var model = $("#model").val();
        var description = $("#description").val();
        var name  = $("#name").val();
        var email = $("#email").val();
        var phone= $("#phone").val();
        var city= $("#city").val();


        var file_data = $('#file').prop('files')[0];   
        var form_data = new FormData();                  
        form_data.append('file', file_data);



        $.ajax({
            url:'php/post.php',
            type:'POST',
            data: {"title":title,"price":price,"model":model,"description":description,"name":name,"email":email,"phone":phone,"city":city,"form_data",form_data},

            success:function(data)
            {
                alert(data);
            }
        });

    });
});

file uploading and data insertion using ajax

1 Answers1