Adding more File Uploader

Adding and removing more file upload

by Banzay

HTML

<div id='ImageUploadedGroup'>
    <div id="ImageUploadDiv1">
        <div>
            <input name="ufile[]" type="file" id="image" />
            <a href="#" class="addButton">Add</a> 
            <a href="#" class="removeButton">Remove</a>
        </div>
    </div>
</div>

JavaScript

$(document).ready(function()
{
    var counter = 2;
    $(".addButton").live("click", function () 
    {
        if(counter>5)
        {
            alert("Only 5 textboxes allow");
            return false;
        }   
        var newTextBoxDiv = $(document.createElement('div'))
        .attr("id", 'ImageUploadDiv' + counter);
        newTextBoxDiv.html('<div><input type="file" name="ufile[]" id="image" ><a href="#" class="addButton">Add</a> <a href="#" class="removeButton">Remove</a></div>');
        newTextBoxDiv.appendTo("#ImageUploadedGroup");
        counter++;
    });
    $(".removeButton").live("click", function () 
    {
        if(counter==2)
        {
            alert("No more textbox to remove");
            return false;
        }   
        counter--;
        $("#ImageUploadDiv" + counter).remove();

     });
});