0

Galera eu uso um script para fazer upload de imagens com PHP e JQUERY e gostaria de exibir a porcentagem do progresso enquanto ele esta enviando, como posso fazer isso? Obrigado..

1
  • Acredito que seria mais fácil informar qual o script está usando para fazer upload, pois do contrário irá receber diversas informações de scripts diferentes para fazer o upload, pois no inicio do tópico você especificou que já usa um script. Dessa forma você receberá uma solução especifica para o seu script. Por exemplo: Já teve respostas para o blueimp e manualmente (boas respostas, diga-se de passagem) eu já postaria sobre o dropzonejs e assim por diante. Se puder informar qual o script que está usando acredito que será possível obter resposta mais específicas. Commented 27/06/2014 às 19:37

2 Respostas 2

1

Primeiramente você terá que fazer isso usando AJAX e jQuery Form.

Seu form sendo assim:

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

Seu arquivo JS

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

Você só terá que adaptar ao seu projeto.

1
  • Obrigado! era exatamente esse script que eu usava! Commented 30/06/2014 às 1:00
1

Você pode utilizar o jQuery File Upload, ele integra com o PHP.

Documentação com Session PHP: 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);
?>

Documentação completa: https://github.com/blueimp/jQuery-File-Upload/wiki

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .