Creating a File Progress Bar in PHP

Creating a file progress bar in PHP

You can try YUI or Prototype or JQuery

PHP Upload, extract and progressbar

You can make some changes to fit but this works rather well if you want a progress bar. You can add more eventlisteners and make it how you want. I hope this is a good starting point for you.

function uploadFile(){
    var file = document.getElementById("zip_file").files[0];
    var formdata = new FormData();
    formdata.append("zip_file", file);
    var ajax = new XMLHttpRequest();
    ajax.upload.addEventListener("progress", function(event) { runprogress(event); } , false);
    ajax.addEventListener("load", function(event) {uploadcomplete(event); }, false);
    //Target your php file. 
    ajax.open("POST", "upload.php");
    ajax.send(formdata);
}
function runprogress(event){
    //The progress %, you might want to Math.round(percent) 
    var percent = (event.loaded / event.total) * 100;
}
function uploadcomplete(event){
    //This will = to your php reply.
    var AjaxReply=event.target.responseText;
}

Progress Bar for file uploads to PHP using AJAX and Bootstrap

removing

async : false;

solved it. But I need to see how to reset the bar now.

How can I create a file upload progress bar with PHP and jQuery?

Just store and update the progress in server side session and use repeated ajaxical calls from the client side on to obtain the current progress from the server side session until it gets 100%. Long story short, here's a clear tutorial how to do it with PHP and jQuery: How to build an ajax progress bar with jQuery and PHP.

Then the server side part, you need at least PHP 5.2 for this with the PECL Uploadprogress extension. You can find here a blog about it: PECL Uploadprogress example. This comment of jazfresh on php.net is also helpful.

PHP Ajax Upload Progress Bar

Introduction

The PHP Doc is very detailed it says

The upload progress will be available in the $_SESSION superglobal when an upload is in progress, and when POSTing a variable of the same name as the session.upload_progress.name INI setting is set to. When PHP detects such POST requests, it will populate an array in the $_SESSION, where the index is a concatenated value of the session.upload_progress.prefix and session.upload_progress.name INI options. The key is typically retrieved by reading these INI settings, i.e.

All the information you require is all ready in the PHP session naming

start_time
content_length
bytes_processed
File Information ( Supports Multiple )

All you need is to extract this information and display it in your HTML form.

Basic Example

a.html

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
    var intval = null;
    var percentage = 0 ;
    function startMonitor() {
        $.getJSON('b.php',
        function (data) {
            if (data) {
                percentage = Math.round((data.bytes_processed / data.content_length) * 100);
                $("#progressbar").progressbar({value: percentage});
                $('#progress-txt').html('Uploading ' + percentage + '%');

            }
            if(!data || percentage == 100){
                $('#progress-txt').html('Complete');
                stopInterval();
            }
        });
    }

    function startInterval() {
        if (intval == null) {
            intval = window.setInterval(function () {startMonitor()}, 200)
        } else {
            stopInterval()
        }
    }

    function stopInterval() {
        if (intval != null) {
            window.clearInterval(intval)
            intval = null;
            $("#progressbar").hide();
            $('#progress-txt').html('Complete');
        }
    }

    startInterval();
</script>

b.php

session_start();
header('Content-type: application/json');
echo json_encode($_SESSION["upload_progress_upload"]);

Example with PHP Session Upload Progress

Here is a better optimized version from PHP Session Upload Progress

JavaScript

$('#fileupload').bind('fileuploadsend', function (e, data) {
    // This feature is only useful for browsers which rely on the iframe transport:
    if (data.dataType.substr(0, 6) === 'iframe') {
        // Set PHP's session.upload_progress.name value:
        var progressObj = {
            name: 'PHP_SESSION_UPLOAD_PROGRESS',
            value: (new Date()).getTime()  // pseudo unique ID
        };
        data.formData.push(progressObj);
        // Start the progress polling:
        data.context.data('interval', setInterval(function () {
            $.get('progress.php', $.param([progressObj]), function (result) {
                // Trigger a fileupload progress event,
                // using the result as progress data:
                e = document.createEvent('Event');
                e.initEvent('progress', false, true);
                $.extend(e, result);
                $('#fileupload').data('fileupload')._onProgress(e, data);
            }, 'json');
        }, 1000)); // poll every second
    }
}).bind('fileuploadalways', function (e, data) {
    clearInterval(data.context.data('interval'));
});

progress.php

$s = $_SESSION['upload_progress_'.intval($_GET['PHP_SESSION_UPLOAD_PROGRESS'])];
$progress = array(
        'lengthComputable' => true,
        'loaded' => $s['bytes_processed'],
        'total' => $s['content_length']
);
echo json_encode($progress);

Other Examples

Tracking Upload Progress with PHP and JavaScript
PHP-5.4-Upload-Progress-Example

Upload Progress Bar in PHP

This is by far (after hours of googling and trying scripts) the simplest to set up and nicest uploader I've found

https://github.com/FineUploader/fine-uploader

It doesn't require APC or any other external PHP libraries, I can get file progress feedback on a shared host, and it claims to support html5 drag and drop (personally untested) and multiple file uploads.

Creating a File Progress Bar in PHP