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..
-
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.– Sileno BritoCommented 27/06/2014 às 19:37
Adicione um comentário
|
2 Respostas
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.
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