Barra de progreso en subida de archivos con jQuery y PHP

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

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP