Skip to main content

Simple jQuery multiple file uploading manager

In following segment refers how to create dynamically add multiple files uploading fields in forms. 

Copy and paste following code segment into html file. Then open it in a browser and try out the demo. (I have used the on-line reference for the jquery-1.10.1.min.js , else download it from http://jquery.com/download/)

<html>
<script src="http://code.jquery.com/jquery-1.10.1.min.js">
    /**
     * Above is for on-line reference for jQuery.
     * If above is not worked, please download the jquery-1.10.1.min.js from here. http://jquery.com/download/
     *
     */
</script>
<script type="text/javascript" xmlns="http://www.w3.org/1999/html">

    $(document).ready(function () {
        var counter = 2;
        $("#addButton").click(function () {
            if (counter > 50) {
                alert("Only 50 files allow...");
                return false;
            }
            var divId = 'TextBoxDiv' + counter;
            var newTextBoxDiv = $(document.createElement('div'))
                    .attr("id", divId);
            newTextBoxDiv.after().html('<input type="file" name="filesUpload" id="filesUpload' + counter + '">' +
                    '<input type="button" id="removeButton" value="x" class="btn btn-small btn-danger" onclick="removeFile(\'' + divId + '\')"/>'
            );
            newTextBoxDiv.appendTo("#TextBoxesGroup");
            counter++;
        });

        $("#removeButton").click(function () {
            if (counter == 1) {
                alert("No more files to remove...");
                return false;
            }
            for (i = 1; i < counter; i++) {
                $("#TextBoxDiv" + i).remove();
            }
            counter = 1;
        });
    });

    function removeFile(divId) {
        var divGroup = document.getElementById('TextBoxesGroup');
        var fileDiv = document.getElementById(divId);
        divGroup.removeChild(fileDiv);
    }

</script>
<body>
<div class="row-fluid">
    <div class="span4" id='TextBoxesGroup'>
        <div id="TextBoxDiv1">
            <input type="file" name="filesUpload" id="filesUpload1">
            <input type="button" class="btn btn-small btn-danger" value="x" onclick="removeFile('TextBoxDiv1')"/>
        </div>
    </div>
    <div class="span4">
        <input type="button" id="addButton" value="Add more"/>
        <input type="button" id="removeButton" value="Remove all"/>
    </div>
</div>
</body>
</html>

Note : We can replace text fields instead of above input type "file"

Comments

Post a Comment

Popular posts from this blog

Prevent hot deployments memory leaks in Tomcat

Since we are mostly using Tomcat as App Container, it's making tough environment when deploying a patch or existing application without restarting tomcat server (Hot deployments) due to reaching the PermGen size due to memory leaks. Hence most of the cases we have to increase PermGen size more than required to deployed applications and it's wasting of memory in the system.  There is a solution for them to release PermGen size and let it clean by GC in JVM at hot deployment. Step 01: Include below dependency to pom.xml <dependency>               <groupId>se.jiderhamn.classloa der-leak-prevention</groupId>         <artifactId>classloader-leak-p revention-servlet</artifactId>   <version>2.2.0</version> </dependency> Step 02: Add listener to web.xml <listener>   <listener-class>se.jiderhamn.c lassloader.leak.prevention.Cla ssLoaderL...
Post a Comment
Read more

Jboss 5.1.0_GA, Maven, Mysql, EJB3, JSF2 sample

I thought to write this because of no completed sample found with using above technologies. Environment JDK 1.6 Jboss-5.1.0.GA JSF2 Maven 3 EJB3 Note : Please copy the mysql connector jar to Jboss lib e.x. I copied mysql-connector-java-5.1.29.jar to jboss-5.1.0.GA/server/default/lib Clone the sample from github here git clone https://github.com/malithmeee/library.git Build the entire project and copy the library.ear to Jboss server. Try to access the web page using http://localhost:8080/library.web/home.jsf Note : Database needed to be created, and change properties in relevant files.
Post a Comment
Read more

Birt Dynamic Table Creation from JDBC Mysql Connection with Maven

In this post refers how to create dynamic Birt reports using given customizing fields list using Birt Runtime 4.2.2 Step 01 : First need to download birt runtime. Download from here For view/Edit the rptdesign files, it's better to use Eclipes 4.2.2 Birt integration. Download eclipes here Step 02 : Extract the birt-runtime-4_2_2. and set the birt runtime home environment variable. e.g. in my case i'm set the environment variable in .bash_profile since i'm using Fedora. (we can specify the Birt home in java code as wel) export BIRT_HOME=/home/malith/usr/eclips/birt-runtime-4_2_2 Step 03 : Create Maven project and insert the dependency for Birt Runtime         <dependency>             <groupId>org.eclipse.birt.runtime</groupId>             <artifactId>org.eclipse.birt.runtime</artifactId>  ...
1 comment
Read more