hi,
See this link n take example how to procede:
<html>
<head>
<title>File Upload Ajax Example </title>
<script src="script/main.js" type="text/javascript"> </script>
<link rel="stylesheet"
href="/css/main.css" type="text/css">
{ ... see src code for some simple javascript/css removed here for space ... }
<script>
function process() {
toggleButton('submit_button');
startpage_checkUploadStatus();
return true;
}
</script>
</head>
<body>
<h1>File Upload </h1>
<!-- This iframe is used as a place for the post to load -->
<iframe id='target_upload' name='target_upload' src='' style='display: none'> </iframe>
<div id="messageDiv"> </div>
<br/>
<ajax:timer ajaxRef="page/checkUploadStatus" startOnLoad="false" frequency="700" />
<div id="contentDiv" style="display:block">
<form enctype="multipart/form-data" name="fileUploadForm"
action="FileUpload" method="post" target="target_upload"
target="target_upload" onSubmit="process();">
Choose File To Upload: <input type="file" name="datafile" size="60" >
<br/> <br/>
<input type="hidden" name="doAjaxStatus" value="true"/>
<input type="submit" id="submit_button" value="submit">
</form>
</div>
</body>
</html><ajax:enable/>
index.jsp for Prototype version
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<% session.removeAttribute("FILE_UPLOAD_STATS"); %>
<html>
<head>
<title>File Upload Exmaple Using Prototype Javascript </title>
<script src="script/prototype.js" language="JavaScript" type="text/javascript"> </script>
<link rel="stylesheet" href="css/main.css" type="text/css">
<script type="text/javascript" language="JavaScript">
var updater = null;
function startStatusCheck() {
document.getElementById("messageDiv").innerHTML = "";
$('submitButton').disabled = true;
updater = new Ajax.PeriodicalUpdater(
'messageDiv',
'UploadStatus',
{asynchronous:true, frequency:1, method: 'post', onFailure: reportError});
return true;
}
function reportError(request) {
killUpdate("Error communicating with server. Please try again.");
}
function killUpdate() {
$('submitButton').disabled = false;
updater.stop();
new Ajax.Updater('messageDiv',
'UploadStatus',
{asynchronous:true, method: 'post', parameters: 'status=end', onFailure: reportError});
}
</script>
{ ... see src code for some simple css removed here for space ... }
</head>
<body>
<h1>File Upload </h1>
<!-- This iframe is used as a place for the post to load -->
<iframe id='target_upload' name='target_upload' src='' style='display: none'> </iframe>
<div id="messageDiv"> </div>
<br/> <br/>
<div id="contentDiv" style="display:block">
<form enctype="multipart/form-data" name="fileUploadForm" action="FileUpload"
method="post"
target="target_upload"
onsubmit="return startStatusCheck();">
Choose File To Upload: <input type="file" name="datafile" size="60">
<br/> <br/>
<input id="submitButton" type="submit" value="submit">
</form>
</div>
</body>
</html>
http://www.learntechnology.net/content/ajax/ajax_upload.jsp
http://69.10.233.10/KB/aspnet/Simple_Progress_bar.aspx