Hi,
I am working on a web app that allows the user to upload files to a servlet/jsp. Yet, the files can be rather large, so I want to provide some type of indicator to the user that the file is being uploaded.
This may be more of a javascript question than a jsp/servlet question, but I thought I would give it a go here.
My current approach is to change some text (to say file uploading) and change an image (from a blank gif to an animated gif) once the user hits the upload button.
I created a function that seems to do the trick (if I invoke this function it works!). Yet, when I invoke the function in the context of uploading the jsp/servlet it only changes the text, but does not change the image to the animated gif. Any ideas?
<html>
<head> <title> </title>
<script type="text/javascript">
function uploadChange(){
document.getElementById('uploadText').innerHTML = 'Uploading File';
document.getElementById('loading').src = 'loadingAnimate.gif';
}
</script>
</head>
<body>
<form enctype='multipart/form-data' action='UploadAccept' method='POST'>
<input type='hidden' name='MAX_FILE_SIZE' value='500000' />
Choose a file to upload <input name='uploadedfile' type='file' />
<input type='submit' value='Upload File' onclick="uploadChange()" />
</form>
</body>
<img src="loadingSpace.gif" name="loading" id="loading" width="48" height="48" border="1">
<b id='uploadText'> </b>
<input type='button' onclick='uploadChange()' value='Change Text'/>
</html>