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");
            }
        });
    });
});

Correct me if I'm wrong, but `jQuery.ajax` does not have a `uploadProgress` property according to http://api.jquery.com/jquery.ajax/. — Mike, Nov 19 '15 at 03:39
Possible duplicate of [File upload progress bar with jquery](http://stackoverflow.com/questions/15410265/file-upload-progress-bar-with-jquery) — Mike, Nov 19 '15 at 03:41
**[You can go with this answer](http://stackoverflow.com/a/22987941/2065039)** — Guruprasad J Rao, Nov 19 '15 at 03:47
@Mike Yea sorry.. I was supposed to, but forgot after giving suggestion.. Done flagging... :) — Guruprasad J Rao, Nov 19 '15 at 04:04
Like I've said before, I've tried these examples and they don't work for me. The form doesn't submit when I use these examples. — webdevhelp, Nov 19 '15 at 08:51
@webdevhelp Try making an [MCVE](http://stackoverflow.com/help/mcve). — Mike, Nov 19 '15 at 19:48

score 1 · Answer 1 · answered Nov 19 '15 at 08:05

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/

I've tried that method. The form just doesn't submit at all. — webdevhelp, Nov 19 '15 at 08:50

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

1 Answers1