创建多个文件上传逻辑答案

【问题标题】：Creating multiple file upload logic创建多个文件上传逻辑
【发布时间】：2014-04-04 14:24:42
【问题描述】：

我正在尝试在 MVC 应用程序中创建多个文件上传。我可以添加一个新的 div 单击“添加”锚标记。但我只能单击父 acnhor 标记的事件，但不能单击我使用以下 java 脚本函数创建的事件。

  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>

【问题讨论】：

您必须在其他一千个重复的问题中使用委托... ;) $('#ParentFileUploadDiv').on('click','.AddFile', function(){...});

标签： javascript jquery asp.net asp.net-mvc asp.net-mvc-3

【解决方案1】：

将事件委托给最近的静态父级：

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

【讨论】：

【解决方案2】：

这很难做到……你考虑过使用插件吗？

这个是免费的+容易实现的：

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

（它是基于 Flash 的.. 一个快速的谷歌搜索将允许你找到基于 jquery/mvc 但我自己使用过的那些我可以保证它。）

【讨论】：