display loading message on form upload

tyutghf · Jul 11, 2008

I have a form that is uploading an image, at present when the user clicks submit the page just sits there loading which is confusing a few users. What I am trying to do is add a loading message when the form is submitted and the image is being uploaded.

The upload is using asp upload if that matters...

form page

Code:

<FORM ENCTYPE="multipart/form-data" ACTION="saveimage.asp" METHOD="POST" name='imageuploadform'>
<label for="file1">Find file</label> <input type='file' name='file1' id='file1' />
<br /><br />
<input type='image' src='/images/forumsubmit.png' name='submit' value='submit' />
</FORM>

saveimage.asp with my effort of a loading message using something I found from dynamic drive

Code:

<html><head><meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1' />
<style type="text/css">
<!--
#loading {
	width: 200px;
	height: 100px;
	background-color: #c0c0c0;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-top: -50px;
	margin-left: -100px;
	text-align: center;
}
-->
</style>

<script type="text/javascript">
<!-- Created by: Robert Paulson : [URL unfurl="true"]http://www.abrahamjoffe.com.au/[/URL] -->
<!-- Begin
document.write('<div id="loading"><br><br>Please wait...</div>');
window.onload=function(){
	document.getElementById("loading").style.display="none";
}
// End -->
</script>
</head>
<body >
<%
Set Upload = Server.CreateObject("Persits.Upload")

Upload.Save ( Server.MapPath("/images/") )

response.write "You may now close this window"

%>
</body>
</html>

The image is upoaded without problem, but the page is blank whilst uploading still. Once the image is loaded the response.write posts the close window message.

can someone lend a hand please?

sovi3t · Aug 6, 2008

It doesn't make that much sense to write the loading text from the destination since the file has to finish uploading before that document is sent back from the server. Instead, create a callback on the form page that you can reference from the destination using parent
The page with the form:

Code:

<html><head><title>Whatever</title>
[b]<script type="text/javascript">
var loadText=document.getElementById('loading');
function uploadFinished()
{
  loadText.innerHTML="";
  // Do whatever you want after the upload finishes
}
function doUpload()
{
  loadText.innerHTML="Loading.... please wait.";
}
</script>[/b]
</head>
<body>
[b]<iframe src="blank.html" name="uploadFrame" id="uploadFrame" style="display:none"></iframe>
<div id="loading" style="color:#ff0000"></div>[/b]
<form enctype="multipart/form-data" action="saveimage.asp" method="post" [b]target="uploadFrame"[/b] name='imageuploadform' [b]onsubmit="return false"[/b]>
<label for="file1">Find file</label> <input type='file' name='file1' id='file1' />
<br /><br />
<input type='image' src='/images/forumsubmit.png' name='submit' value='submit' [b]onclick="doUpload()"[/b] />
</FORM>

The script portion of the asp file

Code:

<script type="text/javascript">
 parent.uploadFinished();
</script>

I'm not 100% about whether other browser would have issues with this, but it works fine in FF

tyutghf · Aug 7, 2008

Thanks for your response, I implemented your changes but once I click submit nothing happens. The file isn`t uploaded eitehr.

Thanks

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

display loading message on form upload

tyutghf

Technical User

sovi3t

Programmer

tyutghf

Technical User

Similar threads

Part and Inventory Search

Sponsor