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

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

Sample Web service and client creation using WSDL with Maven and JAX-WS

How to generate client via WSDL file By executing following command on linux bash command line, cloud be obtain the service port classes > wsimport -keep -verbose http://compA.com/ws/HelloService.wsdl -b binding.xml OR > wsimport -keep -verbose /home/malith/HelloService.wsdl -b binding.xml Note : The binding xml is need to avoid generating JAXB element contents ------ How to create web service By above code generation, we can obtain Interface class which contains the service bridge. We could be wright sample web service by implementing the interface by additionally adding teh @WebService annotation Create the sun-javaws.xml in WEB-INF folder to define web service mappings E.g. @WebService(name = "Hello_", targetNamespace = "http://www.examples.com/wsdl/HelloService.wsdl") public class HelloWebService implements HelloPortType {     /**      * @param firstName      * @return returns java.lang.String ...
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