In this tutorial we will learn how to upload file using ajax with form data. Sometimes we have the requirement like save the form fields and upload the file.
for example, User details form which can contain the user details like name, email, mobile and the user profile picture. This tutorial will help 
you to upload and save the user details along with user profile picture.

Create users table in mysql: 
Below is the structure of users table with basic fields. 

CREATE TABLE `users` (
  `id` INT NOT NULL AUTO_INCREMENT,
  `name` VARCHAR(50) NULL,
  `email` VARCHAR(50) NULL,
  `mobile_no` INT NULL,
  `profile_pic` VARCHAR(100) NULL,
  `created_at` DATETIME NULL,
  `updated_at` DATETIME NULL,
  PRIMARY KEY (`id`));

  

Create Connection(config.php) 

Connect to the database. In config.php add your database name, database username, database password and database name. 

<?php
//Database details
$db_host = 'localhost';
$db_username = 'username';
$db_password = 'password';
$db_name = 'database_name';

//Create connection and select DB
$conn = mysqli_connect($db_host, $db_username, $db_password, $db_name);
if (mysqli_connect_errno()) {
    echo "Failed to connect to MySQL: " . mysqli_connect_error();
}


index.php 

<!--
Used basic html and bootstrap skeleton from the below link for style purpose which contains bootstrap.css,bootstrap.js,jquery.js
https://www.w3schools.com/bootstrap/bootstrap_get_started.asp
Used bootstrap form elements from below link.
https://www.w3schools.com/bootstrap/bootstrap_forms.asp-->
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Ajax File Upload with Form Data using PHP</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">      
        <style>
            .img-box{
                max-height: 300px;
                margin-bottom: 20px;
            }
        </style>
    </head>
    <body>
        <div class="container" style="max-width:800px;margin:0 auto;margin-top:50px;">  
            <div>
                <h2 style="margin-bottom:50px;">Live Demo: Ajax File Upload with Form Data using PHP</h2>
                <div>
                    <form method="post" enctype="multipart/form-data" action="save.php" id="form_user_details" name="form_user_details" onsubmit="return false">
                        <div class="form-group">
                            <label>Name:</label>
                            <input type="text" class="form-control" id="name" required="" placeholder="Enter name" name="name">
                        </div>
                        <div class="form-group">
                            <label for="email">Email:</label>
                            <input type="email" class="form-control" id="email" required="" placeholder="Enter email" name="email">
                        </div>
                        <div class="form-group">
                            <label>Mobile No.:</label>
                            <input type="text" class="form-control" id="mobile" required="" placeholder="Enter mobile" name="mobile">
                        </div>
                        <div class="form-group">
                            <label>Profile Picture</label>
                            <input type="file" name="userfile" id="userfile" accept="image/x-png,image/gif,image/jpeg">
                        </div>
                        <div class="form-group">
                            <input type="submit" class="btn btn-success" value="Save" name="save" id="save">
                        </div>
                        <div class="success-msg"></div>
                        <div class="clearfix"></div>                      
                    </form>
                </div>
            </div>
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script>

                        $(document).on("click", "#save", function () {
                            formData = new FormData(document.forms.namedItem("form_user_details"));
                            $.ajax({
                                url: 'save.php',
                                type: 'POST',
                                data: formData,
                                cache: false,
                                contentType: false,
                                processData: false,
                                dataType: 'json',
                                success: function (data) {
                                    if (data.result == "success") {
                                        $(".success-msg").html(data.msg);
                                        $('#form_user_details')[0].reset();
                                    } else {
                                        console.log(data.msg);
                                    }
                                }
                            });
                        });
        </script>
    </body>
</html>


save.php

<?php

require_once 'config.php';
if (isset($_POST['name'])) {
    $name = mysqli_real_escape_string($conn, $_POST['name']);
    $email = mysqli_real_escape_string($conn, $_POST['email']);
    $mobile = mysqli_real_escape_string($conn, $_POST['mobile']);
    $profile_pic = '';
    if (isset($_FILES['userfile']['name']) && $_FILES['userfile']['name'] != "") {
        $tmp = $_FILES['userfile']['tmp_name'];
        $img_name = "uploads/" . $_FILES['userfile']['name'];
        if (move_uploaded_file($tmp, $img_name)) {
            $profile_pic = $img_name;
        }
    }
    mysqli_query($conn, "insert into users(name,email,mobile,profile_pic) values ('$name','$email','$mobile','$profile_pic')");
    echo json_encode(array("result" => "success", "msg" => "User details saved successfully."));
} else {
    echo json_encode(array("result" => "fail", "msg" => "Server problem. Try after sometime."));
}
?>


 
Written by
Check out this Author's contributed articles.
If you like Tutorialsmint and would like to contribute, you can also write an article using Write an Article. See your article appearing on the Tutorialsmint main page and help other programmers to enhance their knowledge.

Comments(0)

RECENT TUTORIALS
Wed Dec 26 • 08:00 AM GMT
Wed Dec 26 • 08:00 AM GMT
Wed Dec 26 • 08:00 AM GMT
Wed Dec 26 • 08:00 AM GMT
Wed Dec 26 • 08:00 AM GMT
Edit Post
Add Reply