How to make progress indicator

teknospr · April 28, 2012

Good day:

How can I make a simple progress bar or progress indicator in php for an upload form? Here is my upload form code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Registrese</title>
<script src="gen_validatorv4.js" type="text/javascript"></script>

<script type="text/javascript"> 
function getfileextension(inputId) 
{ 
var fileinput = document.getElementById("uploadFile"); 
if(!fileinput ) return ""; 
var filename = fileinput.value; 
if( filename.length == 0 ) return ""; 
var dot = filename.lastIndexOf("."); 
if( dot == -1 ) return ""; 
var extension = filename.substr(dot,filename.length); 
return extension; 
} 
function checkfileType(inputId,allowedExt) 
{ 
var ext = getfileextension(inputId); 
if( ext == allowedExt ) 
  return true; 
else 
  alert("Archivo debe ser video .flv"); 
  return false;
} 
</script> 

<script type="text/JavaScript">
function TestFileType(fileName, fileTypes) {

var myReturn = false;

if (!fileName) return;

dots = fileName.split(".");

//get the part AFTER the LAST period.

fileType = dots[dots.length-1];

if (fileTypes.indexOf(fileType) != -1)

myReturn = true;

else{

alert("Please only upload files that end in types: \n\n" + (fileTypes.join(" .")) + "\n\nPlease select a new file and try again.");

document.getElementById('cf_file').value = '';
myReturn = false;

}

return myReturn;

}
</script>

<SCRIPT TYPE="text/javascript">
<!--
var resetRolls = new Object();

function resetimage(src)
{
this.src=src;
this.confirm=true;
this.alt="Reset";
this.write=resetimage_write;
}

function resetimage_write()
{
document.write('<A ');
if (this.rollover)
    {
    if (! this.name)
        {
        alert('to create a rollover you must give the image a name');
        return;
        }

    resetRolls[this.name] = new Object();
    resetRolls[this.name].over = new Image();
    resetRolls[this.name].over.src=this.rollover;
    resetRolls[this.name].out = new Image();
    resetRolls[this.name].out.src=this.src;
    document.write(
        ' onMouseOver="if (document.images)document.images[\'' + 
        this.name + '\'].src=resetRolls[\'' + this.name + '\'].over.src"' + 
        ' onMouseOut="if (document.images)document.images[\'' + 
        this.name + '\'].src=resetRolls[\'' + this.name + '\'].out.src"'
        );
    }
document.write(' HREF="javascript:');
if (this.confirm)
    document.write('if(confirm(\'¿Desea borrar todos los campos?\'))');
document.write(
    'document.forms[' + 
    (document.forms.length - 1) + '].reset();void(0);">');
document.write('<IMG SRC="' + this.src + '" ALT="' + this.alt + '"');
document.write(' BORDER=0');
if (this.name)document.write(' NAME="' + this.name + '"');
if (this.height)document.write(' HEIGHT=' + this.height);
if (this.width)document.write(' WIDTH=' + this.width);
if (this.otheratts)document.write(' '+ this.otheratts);
document.write('></A>');
}
//-->
</SCRIPT>


</head>
<body bgcolor="#f2efe0">
<table width="700" border="0" align="center" valign="top" cellpadding="0" cellspacing="0">
<tr>
<th scope="row"> </th>
</tr>
<tr>
      <th scope="row"><table width="700" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <th width="241" scope="row" align="center"><font size="5" color="#000000" face="century gothic"> Subir Video</font></th>
        </tr>
  </table></th></tr>
      <tr>
      <th scope="row"> </th>
     </tr>
</table>
<form action="insertvideo.php" method="post"  id="video" enctype="multipart/form-data">
<table width="390" valign="top" align="center">
<td valign="top">
<table valign="top" align="center" width="550" border="0" cellpadding="0" cellspacing="0">
<font size="-1" color="#000000" face="century gothic">
<td><label for="fileToUpload"><font size="-1" color="#000000" face="century gothic">Nombre del video</font></label></td><td align="left"><input type="text" name="videoname" id="videoname" size=50 maxlength=25> </td>
</tr>
<tr>
<td><font size="-1" color="#000000" face="century gothic">Seleccione Video</font></td><td align="left"><input type="file" name="uploadFile" id="uploadFile"> </td>
</tr>
<tr>
<td><font face="century gothic" size="-1">Fecha</font></td>
<td>
<?php


     $now = time(); // or your date as well
     $your_date = strtotime("2011-07-25");
     $datediff = $now - $your_date;
$days = floor($datediff/(60*60*24));

$todayyear=date("Y");
$todaymonth=date("m");
$todayday=date("d");
$currentyear=date("Y");
$curdate=date("Y-m-d");
$currentyear=date("Y");
require_once('classes/tc_calendar.php');
  $myCalendar = new tc_calendar("date5", true, false);
  $myCalendar->setIcon("calendar/images/iconCalendar.gif");
  $myCalendar->setDate(date('d'), date('m'), date('Y'));
  $myCalendar->setPath("calendar/");
  $myCalendar->setYearInterval(2011, $currentyear);
  $myCalendar->dateAllow('2011-05-13', '2015-03-01');
  $myCalendar->setDateFormat('Y-m-d');
  $myCalendar->setAlignment('left', 'bottom');
  $myCalendar->setSpecificDate(array("2011-04-01", "2011-04-04", "2011-12-25"), 0, 'year');
  $myCalendar->setSpecificDate(array("2011-04-10", "2011-04-14"), 0, 'month');
  $myCalendar->setSpecificDate(array("2011-06-01"), 0, '');
  $myCalendar->writeScript();
  ?>
      </td>
</table>
<table width="600" border="0">
  <tr>
    <td width="48"> </td>
    <td width="35"><a href="truquitosadmin.php"><img src="images/003063-blue-jelly-icon-media-a-media23-arrows-seek-back.png" width="35" border="0" /></a></td>
    <td width="124"><a href="truquitosadmin.php"><img src="images/003061-blue-jelly-icon-media-a-media21-arrow-back.png" width="35" height="35" border="0" /></a></td>
    <td width="48"><SCRIPT TYPE="text/javascript">
<!--
var ri = new resetimage("images/074368-simple-red-glossy-icon-alphanumeric-circled-x2.png");
ri.write();
//-->
</SCRIPT>
      <NOSCRIPT>
        <INPUT TYPE=RESET>
      </NOSCRIPT></td>
    <td width="237"><input type="image" text="Añadir" alt="Insertar" src="images/019225-green-jelly-icon-symbols-shapes-check-mark.png" onClick="TestFileType(this.form.uploadFile.value, ['flv', 'FLV', 'mp4', 'm4v', 'webm', 'ogg']);" /></td>
    <td width="82"><img src="images/069497-blue-jelly-icon-alphanumeric-icon_091.png" width="35" height="35" /></td>
  </tr>
</table>
<br></td>
</td>
</table>
</form><script  type="text/javascript">
var frmvalidator = new Validator("video");
frmvalidator.addValidation("videoname","req","Debe llenar el campo de Nombre");
frmvalidator.addValidation("uploadFile","req","Debe seleccionar un video");
</script>
</body>
</html>

Thanks for the help.

xyph · April 28, 2012

Unless you're using PHP 5.4, you want to use an external script to do this, that implements Flash, or other technologies that support tracking uploads. I like Plupload myself.

http://plupload.com/

Sign In

How to make progress indicator

Recommended Posts

teknospr

Link to comment

Share on other sites

xyph

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information