Question

我正在尝试在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>

Answer 1

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

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

Answer 2

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

这个免费+易于实施：

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

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

创建多个文件上载逻辑

2 个答案: