<%@
page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!
DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<
html>
<
head>
<
meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<
LINK href="http://test/test.css" type="text/css" rel="stylesheet">
<
title>File Upload</title>
<
script src="http://code.jquery.com/jquery-latest.min.js"></script>
</
head>
<
body id="loginBody" background="http://test/swoosh.png" >
<
div id="loginBoxWithShadow" cellpadding="0" cellspacing="0" border="0">
<
div id="loginBox">
<
br>
<
br>Please select a file to upload
<
form action="CommonsFileUploadServlet" enctype="multipart/form-data" method="Post">
<br>
<input type="file" name="file1"><br>
<br>
<br>
Selection
<
br>
<
select id="sel">
<
option value="1">1</option>
<
option value="2">2</option>
<
option value="3">3</option>
<
option value="4">4</option>
</
select>
<
div id="somediv">
<
div id="imgLoader">
<
img src="images/loading5.gif" style="position:relative">
</
div>
</
div>
<
br>
<
br>
<
input type="Submit" value="Preview File">
</form>
</div>
</div>
<script>
$(document).ready(
function() { // When the HTML DOM is ready loading, then execute the following function...
$(
'#imgLoader').hide();
$(
'#sel').change( function(){ // Locate HTML DOM element with ID "somebutton" and assign the following function to its "click" event...
$(
'#imgLoader').show();
$.post(
'CubeSelector', function(responseText) { // Execute Ajax GET request on URL of "someservlet" and execute the following function with Ajax response text...
$(
'#somediv').html(responseText); // Locate HTML DOM element with ID "somediv" and set its text content with the response text.
$(
'#imgLoader').hide();
});
});
})
.change();
</script>
</
body>
</
</code>