Hola, caricatos!
Te dejo algo que hice para que lo veas cuando puedas y me des tu opinión y/o ayudes a mejorarlo (la parte del vaciado del input type file, seguro que la reconocés):
Código PHP:
<?php
set_time_limit(0);
function microtime_float()
{
list($useg, $seg) = explode(" ", microtime());
return ((float)$useg + (float)$seg);
}
if(isset($_FILES['foto'])){
$carga=file($_FILES['foto']['tmp_name']);
$size=$_FILES['foto']['size']/1024;
$fp=fopen('tmp.txt','a+');
echo '<script>top.limpiar();</script>';
$tiempo_inicio = microtime_float();
for($i=0;$i<count($carga)+1;$i++){
$progress=($i/count($carga))*200;
$percent=($i/count($carga))*100;
$tiempo_final = microtime_float();
echo
"<script>
top.document.getElementById('status').style.display='block';
top.document.getElementById('status').innerHTML='".$percent."% - ".($size*$percent/100)." kb - restan ".(($tiempo_final - $tiempo_inicio)/$percent*100-($tiempo_final - $tiempo_inicio))." segundos';
//la siguiente línea sería una opción a la barra de progreso, ya que utiliza bastantes recursos:
//top.document.title='".$percent."% - ".($size*$percent/100)." kb - restan ".(($tiempo_final - $tiempo_inicio)/$percent*100-($tiempo_final - $tiempo_inicio))." segundos';
top.document.getElementById('marco').style.display='block';
top.document.getElementById('barra').style.width='".$progress."px';
</script>";
ob_flush();
flush();
//descomentar la sigte línea para probar el funcionamiento en archivos muy pequeños:
//sleep(1);
fwrite($fp,$carga[$i]);
}
fclose($fp);
rename('tmp.txt',$_FILES['foto']['name']);
@unlink('tmp.txt');
exit;
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Upload</title>
<script>
function limpiar(){
campo=document.getElementById('foto');
//corregido: sep=document.getElementById('sep');(Gracias, caricatos!)
cep=document.getElementById('sep');
nuevo=document.createElement("input");
nuevo.type = "file";
nuevo.name = "foto";
nuevo.id = "foto";
nuevo.value = "";
nuevo.className='inp';
nuevo.onchange=borrabarra;
//corregido: campo.form.insertBefore(nuevo, sep);
campo.form.insertBefore(nuevo, cep);
campo.form.removeChild(campo);
}
function borrabarra(){
document.getElementById('marco').style.display='none';
document.getElementById('status').style.display='none';
}
</script>
<style type="text/css">
<!--
.inp {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
color: #000000;
background-color: #DBDBDB;
border: 1px solid #000000;
}
-->
</style>
</head>
<body>
<div id="f"><form action="" method="post" enctype="multipart/form-data" name="form1" id="form1" target="upload" onsubmit="document.getElementById('marco').style.display='block';document.getElementById('status').style.display='block';document.getElementById('status').innerHTML='iniciando upload...';document.getElementById('barra').style.width='0px'">
<input name="foto" type="file" class="inp" id="foto" onchange="borrabarra()" /><span id="sep"> </span>
<input name="Submit" type="submit" class="inp" value="Enviar" />
</form></div><br />
<div id="status" style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:9px; display:none;"></div>
<div id="marco" style="border:1px solid #000000; width:200px; padding:0px; display:none; font-size:5px;"><div id="barra" style="background-color:#990000; width:0px;"> </div></div>
<iframe name="upload" height="1" width="1" style="visibility:hidden"></iframe>
</body>
</html>