PHP Upload, Extract and Progressbar

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

Ajax Progress Bar

There a few ways to approach this.

Ajax polling

You can upload the file and set the job's progress in a database.
After the file is uploaded you ajax a page which reads the progress from the database.

Without Ajax polling

You can also do this with streaming ,This article is a great place to start.
ajax-based-streaming-without-polling

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

jQuery Progress Bar PHP Upload not responding correctly

I solved my issue after an hour of breaking my head over this.

I forgot to put dataType: 'json' to my AJAX call.

url: 'process/uploadCustomerFile.php',
data: formData,
dataType: 'json', // <-- This is what I forgot to add
processData: false,
contentType: false,
type: 'POST',

so the response wasn't treated as JSON

Creating progress bar for file upload and moving it to Amazon server

Pipe Viewer will let you monitor the progress of almost any process.

From that you can feed the progress into a display of your choice, I'd suggest jQuery Progress Bar as it is very versatile, easy to set up and has plenty of example tutorials in case you get stuck

---

Related Topics