Using jQuery AJAX and PHP to create a progress bar for file uploading

Question

First off I want everyone to understand I did look at all of the other examples on stackoverflow, but none have worked for me at all. What I want to do is create a progress bar which shows the how much of the file has been uploaded out of 100%. I have 3 scripts: upload.php which houses the form, fileUpload.php which is script for uploading the file, and script.js which holds the jQuery AJAX code.

Nothing seems to work. With the code I have below, the Ajax returns a success message, however the progress bar doesn't change, nothing is uploaded to the folder and the file itself remains in the file input. The problem lies within the ajax code inside script.js since I can upload a file without the ajax code.

/* upload.php
--------------------------------------------------------*/
<div class="form-wrapper">
    <form method="post" id="uploadForm" action="fileUpload.php" role="form" enctype="multipart/form-data">
        <legend>Upload</legend>
        <div class="form-group">
            <label for="fileUpload">File</label>
            <input type="file" id="fileUpload" name="fileUpload"/>
        </div>
        <button type="submit" id="uploadBtn" class="btn btn-success">Submit</button>
    </form>
    <br>
    <div id="progress" class="progress">
        <div id="progress-bar" class="progress-bar progress-bar-striped active" role="progressbar"
        aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:0%">
        </div>
    </div>
    <span id="sr-only"></span>
</div>


/* fileUpload.php
--------------------------------------------------------*/
<?php

if ($_FILES['fileUpload']['size'] != 0) {

    $name = $_FILES['fileUpload']['name'];
    $data = $_FILES['fileUpload']['tmp_name'];

    $fileDir = "C:\\wamp\\www\\Business\\Images\\$name";
    move_uploaded_file($data, $fileDir);
} 
?>


/* script.js
--------------------------------------------------------*/
$(document).ready(function() {

    $("#progress").hide();
    $("#uploadForm").on('submit', function(e){
        e.preventDefault();

        var $form = $(this);
        $.ajax({
            type: $form.attr('method'),
            url: $form.attr('action'),
            data: $form.serialize(),
            beforeSend:function() {
                $("#progress").show();
            },
            uploadProgress:function(event, position, total, percentageComplete) {
                $("#progress-bar").attr("value", percentageComplete);
                $("#progress-bar").width(percentageComplete + "%");
            },
            success:function() {
                $("#sr-only").html("Success");
            }
        });
    });
});

Answer 1

See jQuery Progress Bar for PHP AJAX File Upload, this will do the job.

File Upload Form showing Progress Bar

<form id="uploadForm" action="upload.php" method="post">
    <div>
        <label>Upload Image File:</label>
        <input name="userImage" id="userImage" type="file" class="demoInputBox" />
    </div>
    <div><input type="submit" id="btnSubmit" value="Submit" class="btnSubmit" /></div>
    <div id="progress-div"><div id="progress-bar"></div></div>
    <div id="targetLayer"></div>
</form>
<div id="loader-icon" style="display:none;"><img src="LoaderIcon.gif" /></div>

jQuery Form Submit

$(document).ready(function() { 
    $('#uploadForm').submit(function(e) {   
        if($('#userImage').val()) {
            e.preventDefault();
            $('#loader-icon').show();
            $(this).ajaxSubmit({ 
                target:   '#targetLayer', 
                beforeSubmit: function() {
                    $("#progress-bar").width('0%');
                },
                uploadProgress: function (event, position, total, percentComplete){ 
                    $("#progress-bar").width(percentComplete + '%');
                    $("#progress-bar").html('<div id="progress-status">' + percentComplete +' %</div>')
                },
                success:function (){
                    $('#loader-icon').hide();
                },
                resetForm: true 
            }); 
            return false; 
        }
    });
});

http://phppot.com/jquery/jquery-progress-bar-for-php-ajax-file-upload/