ajax file upload not showing response on same jsp page
<!doctype html>
<head>
<script src="js/jquery.js"></script>
<script src="js/jquery.form.js"></script>
<style>
form { display: block; margin: 20px auto; background: #eee; border-radius:
10px; padding: 15px }
#progress { position:relative; width:400px; border: 1px solid #ddd;
padding: 1px; border-radius: 3px; }
#bar { background-color: #B4F5B4; width:0%; height:20px; border-radius:
3px; }
#percent { position:absolute; display:inline-block; top:3px; left:48%; }
</style>
</head>
<body>
<h1>File Upload Demo</h1>
<form id="myForm" action="../upload" method="post"
enctype="multipart/form-data">
<input type="file" size="60" name="myfile" accept=".sql">
<input type="submit" value="Ajax File Upload">
</form>
<div id="progress">
<div id="bar"></div>
<div id="percent">0%</div >
</div>
<br/>
<div id="message"></div>
<script>
$(document).ready(function()
{
var options = {
beforeSend: function()
{
$("#progress").show();
//clear everything
$("#bar").width('0%');
$("#message").html("");
$("#percent").html("0%");
},
uploadProgress: function(event, position, total, percentComplete)
{
$("#bar").width(percentComplete+'%');
$("#percent").html(percentComplete+'%');
},
success: function()
{
$("#bar").width('100%');
$("#percent").html('100%');
},
complete: function(response)
{
$("#message").html("<font
color='green'>"+response.responseText+"</font>");
},
error: function()
{
$("#message").html("<font color='red'> ERROR: unable to upload
files</font>");
}
};
$("#myForm").ajaxForm(options);
});
</script>
</body>
</html>
To upload file using ajax, this code works fine in html. Upload response
showing at same html page. But, when I'm putting same code into jsp, then
response it showing at the next page, where I'm uploading my file i.e.
upload servlet. But, I want to show my response on my jsp page itself.
How to solve this problem.!!
No comments:
Post a Comment