SOA / Web Services / Java

A Technology Blog

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

One Response to “Dynamically upload files using JQuery”

  1. suresh said

    goood

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: