Upload progress with jquery or php

Question

Guys I use a script to upload images with PHP and JQUERY and would like to display the percentage of progress while it is sending, how can I do that? Thank you..

Answer 1

You can use the jQuery File Upload, it integrates with PHP.

Documentation with PHP Session: application js:

// This code assumes each file upload has a related DOM node
// set as data.context, which is true for the UI version:
$('#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 = $.Event( 'progress', {bubbles: false, cancelable: true});
                $.extend(e, result);
                ($('#fileupload').data('blueimp-fileupload') ||
                    $('#fileupload').data('fileupload'))._onProgress(e, data);
            }, 'json');
        }, 1000)); // poll every second
    }
}).bind('fileuploadalways', function (e, data) {
    clearInterval(data.context.data('interval'));
});

Progress.php:

<?php
  // Assuming default values for session.upload_progress.prefix
  // and session.upload_progress.name:
  $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);
?>

Full documentation: https://github.com/blueimp/jQuery-File-Upload/wiki

Answer 2

First you will have to do this using AJAX and jQuery Form.

Your form being so:

<form action="processupload.php" method="post" enctype="multipart/form-data" id="UploadForm">
    <input name="ImageFile" type="file" />
    <input type="submit"  id="SubmitButton" value="Upload" />
</form>
<div id="progressbox">
    <div id="progressbar"></div>
    <div id="statustxt">0%</div>
</div>
<div id="output"></div>

Your JS file

$(document).ready(function() {
    //elements
    var progressbox     = $('#progressbox');
    var progressbar     = $('#progressbar');
    var statustxt       = $('#statustxt');
    var submitbutton    = $("#SubmitButton");
    var myform          = $("#UploadForm");
    var output          = $("#output");
    var completed       = '0%';

    $(myform).ajaxForm({
        beforeSend: function() { 
            submitbutton.attr('disabled', '');
            statustxt.empty();
            progressbox.slideDown(); //exibe a barra de progresso
            progressbar.width(completed); //inicia em 0%
            statustxt.html(completed); //exibe o texto
            statustxt.css('color','#000'); //define a cor
        },
        uploadProgress: function(event, position, total, percentComplete) { 
            progressbar.width(percentComplete + '%') //atualiza o tamanho da barra
            statustxt.html(percentComplete + '%'); //atualiza o texto
            if(percentComplete>50)
                {
                    statustxt.css('color','#fff'); //troca a cor acima dos 50%
                }
            },
        complete: function(response) { // quando completar
            output.html(response.responseText); //exibe a resposta do seu arquivo php... podendo ser a imagem carregada
            myform.resetForm();  // reseta o form
            submitbutton.removeAttr('disabled'); //habilita o botão novamente
            progressbox.slideUp(); // esconde a barra
            }
    });
});

CSS

#progressbox {
    border: 1px solid #0099CC;
    padding: 1px; 
    position:relative;
    width:400px;
    border-radius: 3px;
    margin: 10px;
    display:none;
    text-align:left;
}
#progressbar {
    height:20px;
    border-radius: 3px;
    background-color: #003333;
    width:1%;
}
#statustxt {
    top:3px;
    left:50%;
    position:absolute;
    display:inline-block;
    color: #000000;
}

You will only have to adapt to your project.