You must carefully follow these steps to add progress bar functionality
to your application.
Step 1. If your upload form is located in an .HTML file, you should make it into
an .ASP file as some ASP script needs to be added to that file.
Step 2. At the top of your form file (above the actual form), place the following code:
<%
Set UploadProgress = Server.CreateObject("Persits.UploadProgress")
PID = "PID=" & UploadProgress.CreateProgressID()
barref = "framebar.asp?to=10&" & PID
%>
|
This code is responsible for creating a unique progress ID which connects
the page containing the upload form with the progress indicator
and upload script.
Step 3. Add the following JavaScript function to your form file below
the ASP fragment of Step 2. You may place it between the <HEAD>...</HEAD> tags.
<SCRIPT LANGUAGE="JavaScript">
function ShowProgress()
{
strAppVersion = navigator.appVersion;
if (document.MyForm.FILE1.value != "" || document.MyForm.FILE2.value != "" || document.MyForm.FILE3.value != "")
{
if (strAppVersion.indexOf('MSIE') != -1 && strAppVersion.substr(strAppVersion.indexOf('MSIE')+5,1) > 4)
{
winstyle = "dialogWidth=385px; dialogHeight:140px; center:yes";
window.showModelessDialog('<% = barref %>&b=IE',null,winstyle);
}
else
{
window.open('<% = barref %>&b=NN','','width=370,height=115', true);
}
}
return true;
}
</SCRIPT>
|
The function ShowProgress() is responsible for opening the progress bar window
upon submission of your upload form. You may need to change the line
if (document.MyForm.FILE1.value != "" || document.MyForm.FILE2.value != "" || document.MyForm.FILE3.value != "")
according to your own form name and the names of your file item(s). In our example,
the form name is MyForm, and the file items are FILE1, FILE2 and FILE3.
Step 4. Add an extra parameter to the ACTION attribute of your
upload form, as follows:
<FORM NAME="MyForm" METHOD="POST" ENCTYPE="multipart/form-data"
ACTION="progress_upload.asp?<% = PID %>">
Step 5. Add an OnSubmit attribute to your upload form
which calls the ShowProgress() routine added in Step 3, as follows:
<FORM NAME="MyForm" METHOD="POST" ENCTYPE="multipart/form-data"
ACTION="progress_upload.asp?<% = PID %>"
OnSubmit="return ShowProgress();">
Step 5. Make sure the files FRAMEBAR.ASP, BAR.ASP, and NOTE.HTM are located
in the same directory as your form file. FRAMEBAR.ASP contains the main
frameset for the progress indicator. Under IE, it invokes the file BAR.ASP
within an <IFRAME>. Under Netscape, it invokes the files BAR.ASP and NOTE.HTM
within a regular <FRAMESET>. You only need to modify
the files BAR.ASP and NOTE.HTM to customize your progress indicator.
We do not recommend making any changes to the file FRAMEBAR.ASP, unless
you need to change the size of your progress bar.
Step 6. Add the following line to your upload script
right after the CreateObject line:
<%
Set Upload = Server.CreateObject("Persits.Upload")
Upload.ProgressID = Request.QueryString("PID")
...
%>
|
This tells the UploadManager object the progress ID of the current
upload, thereby connecting it to the progress window.
The sample files progress.asp and progress_upload.asp demonstrate a simple
progress bar-enabled upload system.
Click the link below to run this code sample:
http://localhost/aspupload/05_progress/progress.asp
