jQuery Ajax File upload with Percentage Progress bar using PHP MySQLi

jQuery Ajax File upload with Percentage Progress bar using PHP MySQLi

In this Post We Will Explain About is jQuery Ajax File upload with Percentage Progress bar using PHP MySQLi With Example and Demo.Welcome on Pakainfo.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to File Upload Progress Bar Using jQuery And PHP Example

In this post we will show you Best way to implement jQuery Ajax file upload with percentage progress bar, hear for PHP – File upload progress bar with percentage using form jquery with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.


Letโ€™s Display the User Layout Front end source code first (View side HTML code and jQuery script also used simple Bootstrap for Simple step by step progress bar):

Also Read This ๐Ÿ‘‰   Laravel Route Group Middleware Auth

<!DOCTYPE html>
        <title>jQuery Ajax file upload with percentage progress bar</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- include CDN FOR jQuery -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <!-- include CDN FOR bootstrap files -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <!--CDN FOR Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
        <!-- CDN FOR Latest minified JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

            $(function () {
                $('#uploadbtn').click(function () {
                    $('.liveprogress').css('width', '0');
                    var filename = $('#filename').val();
                    var livefileimg = $('#livefileimg').val();
                    if (filename == '' || livefileimg == '') {
                        alert('Please enter Your file name and chooes file');
                    var allfrmData = new FormData();
                    allfrmData.append('livefileimg', $('#livefileimg')[0].files[0]);
                    allfrmData.append('filename', filename);
                    $('#uploadbtn').attr('disabled', 'disabled');
                     $('.message').text('Your File Uploading in progress...');
                        url: 'do_upload.php',
                        data: allfrmData,
                        processData: false,
                        contentType: false,
                        type: 'POST',
                        // this section part is jquery progress bar
                        xhr: function () {
                            var xhr = new window.XMLHttpRequest();
                            xhr.upload.addEventListener("progress", function (evt) {
                                if (evt.lengthComputable) {
                                    var totalPerCom = evt.loaded / evt.total;
                                    totalPerCom = parseInt(totalPerCom * 100);
                                    $('.liveprogress').text(totalPerCom + '%');
                                    $('.liveprogress').css('width', totalPerCom + '%');
                            }, false);
                            return xhr;
                        success: function (data) {
        <div class="container">
            <div class="row">
                <h3>Simple jQuery Ajax file upload with percentage progress bar Example</h3>
                <form id="liveform" method="post">

                    <div class="live form-group myfl">
                        <label>file name: </label>
                        <input class="form-control fl" type="text" id="filename" /> 
                    <div class="live form-group myfl">
                        <label>Select file: </label>
                        <input class="form-control fl" type="file" id="livefileimg" />
                    <div class="live form-group myfl">
                        <div class="progress">
                            <div class="progress-bar progress-bar-success liveprogress" role="progressbar" style="width:0%">0%</div>

                        <div class="message"></div>

                    <input type="button" id="uploadbtn" class="btn-success" value="Upload" />

As you can Dsiplay We have used simple pure jquery FormData() to send the HTML form All data to the backend Like as a php Source code.

Also Read This ๐Ÿ‘‰   Laravel Passing Multiple Variables from Controller to View

PHP Scripts(do_upload.php)

Letโ€™s Step Simple Display the PHP script as well:


if (isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST") {

    $livepath = "uploads/";
    $fl_valid_formats = array("pdf", "xls", "xlsx", "jpg", "GIF", "JPG", "PNG", "png", "gif", "bmp", "jpeg",  "doc", "txt", "docx");
    $fname = $_FILES['livefileimg']['name'];
    $fsize = $_FILES['livefileimg']['size'];

    if (strlen($fname)) {
        list($txt, $flext) = explode(".", $fname);
        if (in_array($flext, $fl_valid_formats)) {
            if ($fsize < 2098888) { 
                $file_name = $_POST['filename']; 
                $lsttmp = $_FILES['livefileimg']['tmp_name'];
                if (move_uploaded_file($lsttmp, $livepath . $file_name.'.'.$flext)) { 
                    echo "Good Luck.. File uploaded successfully!!";
                } else {
                    echo "failed";
            } else {
                echo "Please Upload - Your File or Images size max 2 MB";
        } else {
            echo "Your File Invalid file format.. Sorry";
    } else {
        echo "Please select a Your File..!";

You are Most welcome in my youtube Channel Please subscribe my channel. and give me FeedBack.
More Details……
Angularjs Example

Also Read This ๐Ÿ‘‰   PHP Laravel 5.7 Get IP Address Example


I hope you have Got What is PHP – File upload progress bar with percentage using form jquery And how it works.I would Like to have FeedBack From My Blog(Pakainfo.com) readers.Your Valuable FeedBack,Any Question,or any Comments about This Article(Pakainfo.com) Are Most Always Welcome.