jQuery Ajax image and file upload in PHP and MySQLi with Progressbar

Learn how to upload image and file using jQuery Ajax and PHP MySQLi. And you will also learn how to implement a progress bar with this file upload application.

---

But, before creating this application, first, you will have to learn about PHP File upload. For that check out this PHP File Upload Tutorial. In this tutorial, I have already discussed PHP File upload in briefly.

Table of contents of PHP File Upload Tutorial –

• Simple File Upload
• Check file already exists(uploaded) or not
• Rename the File If the File Already Exists
• Set PHP upload file size limit
• Upload the only specified file type (Images, PDF, etc.)
• Upload image and store image name in Database

---

But, if you already know how to upload files with core PHP, then you continue.

jQuery Ajax file upload in PHP and MySQLi

First, we will create a simple PHP MySQLi file upload application with Ajax and yes, to perform AJAX we’ll use the popular JS library jQuery.

After creating that then we will implement the progress bar inside this application.

To Create this application, open your htdocs folder of XAMPP or your server root directory and then create a new folder called ajax-file-upload.

After that, Inside the ajax-file-upload folder, you have to create two files one is index.html and another is upload.php, and then inside this folder create a new folder called uploads.

The uploads folder will be used to store the uploaded files.

index.html

<form action="" method="POST" id="myForm">
    <input type="file" name="userImage">
    <input type="submit" value="Upload">
</form>
<div class="img"></div>

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(function(){
    $("#myForm").submit(function(e){
        e.preventDefault();
        $.ajax({
            url: 'upload.php',
            type: 'POST',
            data: new FormData(this),
            processData: false,
            contentType: false,
            cache: false,
            success: function (data) {
                $('.img').html(data);
            }
        });
    });
});
</script>

upload.php

<?php
if(isset($_FILES) && !empty($_FILES)) {
    if(is_uploaded_file($_FILES['userImage']['tmp_name'])) {
        $sourcePath = $_FILES['userImage']['tmp_name'];
        $targetPath = "uploads/".$_FILES['userImage']['name'];
        if(move_uploaded_file($sourcePath,$targetPath)) {
        ?>
        <img src="<?php echo $targetPath; ?>">
        <?php
        }
    }
}
?>

Now open http://localhost/ajax-upload/ and test your application.

---

Implementing the progress bar inside the ajax upload application

Now, we will add the upload progress bar feature inside our ajax upload application.

index.html

<form action="" method="POST" id="myForm">
    <input type="file" name="userImage">
    <input type="submit" value="Upload">
</form>
<progress class="progress" max="100" value="0"></progress>
<div class="img"></div>

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(function(){
    $("#myForm").submit(function(e){
        e.preventDefault();
        $.ajax({
            url: 'upload.php',
            type: 'POST',
            data: new FormData(this),
            processData: false,
            contentType: false,
            cache: false,
            // this part is progress bar
            xhr: function () {
                var xhr =  new XMLHttpRequest();
                xhr.upload.addEventListener("progress", function (evt) {
                    if (evt.lengthComputable) {
                        var percentComplete = evt.loaded / evt.total;
                        percentComplete = parseInt(percentComplete * 100);
                        //console.log(percentComplete);
                        $('progress').val(percentComplete);  
                    }
                }, false);
                return xhr;
            },
            success: function (data) {
                $('.img').html(data);
            }
        });
    });
});
</script>

The upload.php file will remain the same.

Completed.