SOA / Web Services / Java

A Technology Blog

Archive for April, 2011

Dynamically upload files using JQuery

Posted by Vivek on April 10, 2011

If you developing a web page and you have a requirement that multiple files need to selected and uploaded, then conventional file upload mechanisms do not work. You might see a lot of web applications which allow you to upload files but the file upload limit is pre-determined. In cases, where the number of files to be selected is not known, these solutions do not work or adds more complexity to the code. JQuery is one way to achieve the desired result and the advantage is that it is an advanced form of Javascript and is easy to understand and allows writing less code.   

The following example demonstrates how JQuery can be used to upload files dynamically. You just need to import some javascript files and that’s it.

<!DOCTYPE html PUBLIC ‘-//W3C//DTD XHTML 1.0 Transitional//EN’ ‘http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd’&gt;

<html xmlns=”http://www.w3.org/1999/xhtml&#8221; xml:lang=”en” lang=”en”>

<head>

<title>Imporing XSDs</title>

<script src=’http://jquery-multifile-plugin.googlecode.com/svn/trunk/jquery.js&#8217; type=”text/javascript”></script>

<script src=’http://jquery-multifile-plugin.googlecode.com/svn/trunk/documentation.js&#8217; type=”text/javascript”></script>

<link href=’http://jquery-multifile-plugin.googlecode.com/svn/trunk/documentation.css&#8217; type=”text/css” rel=”stylesheet”/>

<script type=”text/javaScript” src=”http://www.fyneworks.com/jquery/project/chili/jquery.chili-2.0.js”></script&gt;

 <script type=”text/javascript”>try{ChiliBook.recipeFolder=”/jquery/project/chili/”}catch(e){}</script>

<script src=’http://jquery-multifile-plugin.googlecode.com/svn/trunk/jquery.form.js&#8217; type=”text/javascript” language=”javascript”></script>

<script src=’http://jquery-multifile-plugin.googlecode.com/svn/trunk/jquery.MetaData.js&#8217; type=”text/javascript” language=”javascript”></script>

<script src=’http://jquery-multifile-plugin.googlecode.com/svn/trunk/jquery.MultiFile.js&#8217; type=”text/javascript” language=”javascript”></script>

<script src=’http://jquery-multifile-plugin.googlecode.com/svn/trunk/jquery.blockUI.js&#8217; type=”text/javascript” language=”javascript”></script></head>

<body> 

Import Files

<br></br>

<form action=”upload.jsp” method=”post” enctype=”multipart/form-data” name=”form1″ id=”form1″>

<input type=”file”/>

<br /><br />

<input type=”submit” name=”Submit” value=”Submit” />

</form></body></html>

 
 Learn more about JQuery at http://docs.jquery.com/How_jQuery_Works.

 

Advertisements

Posted in Java/J2EE | 1 Comment »