He recibido muchas peticiones para que hiciese un tutorial sobre cómo implementar una barra de progreso en un formulario de subida de ficheros, para así saber el tiempo transcurrido y restante de la subida de los archivos al servidor. En este artículo os lo explico de forma sencillo mediante unas cuantas líneas de código utilizando la librería APC. Es tan simple como obtener información sobre el proceso de subida de ficheros a cada segundo e ir incrementando la barra coloreada utilizando propiedades de CSS. Vamos a echar un vistazo a cómo hacerlo.
Para ejecutar este script debes instalar la librería apc. El diseño de la aplicación lo hemos llevado a cabo con boostrap, ya sabes, el framework CSS.
get_progress.php
Contiene el código PHP que chequea el estado de la subida del fichero al servidor.
session_start(); error_reporting(0); /* // For PHP 5.4 users $progress_key = ini_get("session.upload_progress.prefix")."uploadImage"; // uploadImage is a Form name $current = $_SESSION[$progress_key]["bytes_processed"]; $total = $_SESSION[$progress_key]["content_length"]; echo $current < $total ? ceil($current / $total * 100) : 100; */ // For PHP 5.2+ php_apc.dll or php_apc.so holder if(isset($_GET['progress_key']) and !empty($_GET['progress_key'])){ $status = apc_fetch('upload_'.$_GET['progress_key']); echo $status['current']/$status['total']*100; exit; }
index.php
Formulario de subida de ficheros. Acuérdate de agregar algunas reglas de validación al formulario, como por ejemplo, alguna que limite el peso de los ficheros, o si es conveniente, la extensión del mismo.
<?php
$uiq = uniqid();
$image_folder = "uploads/";
$uploaded = false;
if(isset($_POST['upload_image'])){
if($_FILES['userImage']['error'] == 0 ){
$up = move_uploaded_file($_FILES['userImage']['tmp_name'], $image_folder.$_FILES['userImage']['name']);
if($up){
$uploaded = true;
}
}
}
?>
<form name="uploadImage" id="uploadImage" enctype="multipart/form-data" action="index.php?progress=<?php echo($uiq)?>" method="post" class="well">
<label>Upload File</label>
<input type="file" name="userImage" id="userImage" />
<span class="badge badge-info" style="display:none;">0%</span>
<input type="submit" class="btn btn-success" name="upload_image" id="upload_image" value="UPLOAD FILE" />
<div class="progress" style="display:none;"><div class="bar" style="width:0%;"></div></div>
</form>
Javascript
Contiene Javascript implementado con propiedades de Jquery para obtener información de los archivos subidos al servidor cada pocos segundos.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script type="application/javascript">
$(document).ready(function(){
var randIDS = '<?php echo $uiq?>';
// Add Hidden Field
var hidden = $("<input>");
hidden.attr({
name:"APC_UPLOAD_PROGRESS",
id:"progress_key",
type:"hidden",
value:randIDS
});
$("#uploadImage").prepend(hidden);
$("#uploadImage").submit(function(e){
var p = $(this);
p.attr('target','tmpForm');
// creating iframe
if($("#tmpForm").length == 0){
var frame = $("<iframe>");
frame.attr({
name:'tmpForm',
id:'tmpForm',
action:'about:blank',
border:0
}).css('display','none');
p.after(frame);
}
// Start file upload
$.get("get_progress.php", {progress_key:randIDS, rand:Math.random()},
function(data){
var uploaded = parseInt(data);
if(uploaded == 100){
$(".progress, .badge").hide();
clearInterval(loadLoader);
}
else if(uploaded < 100)
{
$(".progress, .badge").show();
$(".badge").text(uploaded+"%");
var cWidth = $(".bar").css('width', uploaded+"%");
}
if(uploaded < 100)
var loader = setInterval(loadLoader,2000);
});
var loadLoader = function(){
$.get("get_progress.php", {progress_key:randIDS, rand:Math.random()}, function(data)
{
var uploaded = parseInt(data);
if(uploaded == 100){
$(".progress, .badge").hide();
parent.location.href="index.php?success";
}
else if(uploaded < 100)
{
$(".progress, .badge").show();
$(".badge").text(uploaded+"%");
var cWidth = $(".bar").css('width', uploaded+"%");
}
});
}
});});
</script>
Fuente: 9lessons.info