<HTML>
<HEAD>
<SCRIPT TYPE="text/javascript" SRC="/jaxcent21.js"></SCRIPT>
<SCRIPT TYPE="text/javascript">
// Progress bar functions.
// Initialize and display the progress bar.
function progressBarInit()
{
var progressbar = document.getElementById( "progressBar" );
var progressCell = document.getElementById( "progressCell" );
var progressFiller = document.getElementById( "progressFiller" );
var caption = document.getElementById( "progressCaption" );
progressBar.style.display = "block";
caption.innerHTML = "0%";
progressCell.style.display = "none";
}
// Set the progress bar at a given percentage.
function progressBarSet( percent )
{
var progressbar = document.getElementById( "progressBar" );
var progressCell = document.getElementById( "progressCell" );
var progressFiller = document.getElementById( "progressFiller" );
var caption = document.getElementById( "progressCaption" );
progressBar.setAttribute( "display", "block" );
var percentage = percent + "%";
var remaining = ( 100 - percent ) + "%";
caption.innerHTML = percentage;
var percentWidth = percent * 400 / 100;
var remainingWidth = 400 - percentWidth;
if ( percent <= 0 ) {
progressCell.style.display = "none";
} else {
progressCell.style.display = "block";
progressCell.width = percentWidth;
}
if ( percent >= 100 ) {
progressFiller.style.display = "none";
} else {
progressFiller.style.display = "block";
progressFiller.width = remainingWidth;
}
}
// Hide the progress bar when done
function progressBarDone()
{
var progressbar = document.getElementById( "progressBar" );
var progressCell = document.getElementById( "progressCell" );
progressBar.style.display = "none";
}
</SCRIPT>
</HEAD>
<BODY>
This sample demonstrates file upload using Jaxcent.
<P>
You can upload a JPEG image using the form below. The image will be displayed below the form.
<FORM ID=uploadForm>
<P>Image Caption <INPUT type="text" name="description"><BR>
Image File <INPUT type="file" name="imagefile" accept="image/jpeg"><BR>
<INPUT type="submit" value="Upload"> <INPUT type="reset">
</FORM>
<TABLE ID=progressBar cellspacing=0 style="display: none; width: 410px; border-collapse: collapse;">
<CAPTION ID=progressCaption>0%</CAPTION>
<TR><TD ID=progressCell WIDTH=1% style="background-color: red; border: 2px solid lightblue;"> </TD><TD WIDTH=99% ID=progressFiller style="background-color: lightyellow; border: 2px solid lightblue;"> </TD></TR>
</TABLE>
<P>
<IMG ID=uploadedImage src="images/PlaceHolder.jpeg"></IMG><BR>
<H2 ID=imageDescription> </H2>
</BODY>
</HTML>