teknospr Posted April 28, 2012 Share Posted 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. Quote Link to comment https://forums.phpfreaks.com/topic/261769-how-to-make-progress-indicator/ Share on other sites More sharing options...
xyph Posted April 28, 2012 Share Posted 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/ Quote Link to comment https://forums.phpfreaks.com/topic/261769-how-to-make-progress-indicator/#findComment-1341415 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.