Creating multiple file upload logic

Question

I am trying to create multiple file upload in an MVC Application. I am able to add a new div on the click of "Add" anchor tag. but I am only able to click the event of parent acnhor tag but not of the ones that I am creating with the below java script function.

  View Page
     <div id="ParentFileUploadDiv" style="width: 100%; float: left; padding: 5px 0;">
                                <div style="width: 100%; float: left;" id="FileBlock_1">
                                    <label>Find File</label>
                                    <input type="file" id="DocFile" name="DocumentFile" style="width: 45%; height: 25px;" />
                                    <a class="AddFile">
                                        <img src="~/Images/AddMore.png" />Add</a>
                                    <a class="RemoveFile">
                                        <img src="~/Images/Cross.png" />Remove</a>
                                    <div id="FileNM"></div>
                                    @*    <a class="DownloadImage" style="display: none !important;" title="Download File" id="DI_Anch" onclick="DownloadFile();"></a>*@
                                </div>
                            </div>

    <script>
    $('.AddFile').click(function () {

            var LastChildElement = $("#ParentFileUploadDiv").children().last();
            var GetLastNumber = LastChildElement.attr('id').split('_');
            var FileCounter = parseInt(GetLastNumber[1]) + parseInt(1);
            var curDiv = $('#ParentFileUploadDiv');

            var newDiv = '<div id="FileBlock_' + FileCounter + '" style="width: 100%; float: left;" >' +
                         '<label>Find File</label>' +
                         '<input type="file" name="DocumentFile" style="width: 45%; height: 25px;" />' +
                         '<a class="AddFile">' +
                         '<img src="/Images/AddMore.png" />Add</a>' +
                         '<a class="RemoveFile">' +
                         '<img src="/Images/Cross.png" />Remove</a>'
                         + '</div>';
            $(newDiv).appendTo(curDiv);

        });

        function RemoveFileUpload(div) {
            document.getElementById("FileUploadContainer").removeChild(div.parentNode);
        }
    </script>

you have to use delegation as answered in the thousand other duplicated questions... ;) $('#ParentFileUploadDiv').on('click','.AddFile', function(){...}); — A. Wolff
– A. Wolff, Commented Mar 3, 2014 at 13:53

A. Wolff · Accepted Answer · 2014-03-03 13:56:47Z

1

Delegate event to closest static parent:

$('#ParentFileUploadDiv').on('click','.AddFile', function(){...});

answered Mar 3, 2014 at 13:56

A. Wolff

74.4k9 gold badges98 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

JF it · Accepted Answer · 2014-03-03 13:56:47Z

0

This is fairly hard to do.. have you considered using a plugin?

This one is free + easy to implement:

http://www.uploadify.com/demos/

(it is flash based.. a quick google search will allow you to find ones that are jquery/mvc based but having used this myself i can vouch for it.)

answered Mar 3, 2014 at 13:56

JF it

2,3833 gold badges23 silver badges30 bronze badges

Collectives™ on Stack Overflow

Creating multiple file upload logic

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related