Jquery文件上传在div元素

Question

我在我的ASP.NET MVC项目中使用Jquery File Upload插件。问题是“添加文件”按钮在div内部不起作用，当我点击时没有像打开文件浏览器那样给出任何反应，只能直接在体内工作。另外，我在控制台中没有任何错误。

我的观点：

    @using MUKAL_Education.Models
@model AddLectureModel
@{
    ViewBag.Title = "Add";
}
@Scripts.Render("~/bundles/jquery-unobtrusive")
@section scripts{
    <link rel="stylesheet" href="@Url.Content("~/Content/LectureEdit.css")" />
    <link href="~/Content/bootstrap-theme.css" rel="stylesheet" />
    <link href="~/Content/jquery.fileupload.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-iframe.transport.js"></script>
    <script src="~/Scripts/jquery.fileupload.js"></script>
    <script src="~/Scripts/jquery.fileupload-process.js"></script>
    <script src="~/Scripts/jquery.fileupload-validate.js"></script>
    <script src="~/Scripts/jquery.fileupload-ui.js"></script>
    <script>
        function findTagByText(text) {
            var jSpot = $("a:contains(" + text + ")")
                .filter(function () { return this.text === text; });
            return jSpot;
        }

        var removeDuplicatesInPlace = function (arr) {
            var ret, len, i, j, cur, found;
            ret = [];
            len = arr.length;
            for (i = 0; i < len; i++) {
                cur = arr[i];
                found = false;
                for (j = 0; !found && (j < len); j++) {
                    if (cur === arr[j]) {
                        if (i === j) {
                            ret.push(cur);
                        }
                        found = true;
                    }
                }
            }
            return ret;
        }


        $(document).ready(function () {

            $('#fileupload').fileupload({
                dataType: 'json',
                url: '/Lecture/UploadFiles',
                autoUpload: true,
                done: function (e, data) {
                    $('.file_name').html(data.result.name);
                    $('.file_type').html(data.result.type);
                    $('.file_size').html(data.result.size);
                }
            }).on('fileuploadprogressall', function (e, data) {
                var progress = parseInt(data.loaded / data.total * 100, 10);
                $('.progress .progress-bar').css('width', progress + '%');
            });


            $("#tag_button").click(function() {
                var tags = $("#tag-input").val().trim().replace("<","").replace(">","").split(",");
                tags = removeDuplicatesInPlace(tags);
                var existing_tags = [];
                $("#tag-container .tag").each(function() {
                    existing_tags.push($(this).text());
                });
                var tag_list = tags;
                for (raw_tag in tags) {
                    if ($.inArray(tags[raw_tag], existing_tags) != -1) {
                        findTagByText(tags[raw_tag]).fadeTo('slow', 0.5).fadeTo('slow', 1.0);
                        delete tag_list[raw_tag];
        }
        }
                for (myTag in tag_list) {
                    if(tag_list[myTag] != "") { 
            var tag = "<a class='tag'>" + tag_list[myTag] + "<i class='fa fa-times'><i/></a>";
            $("#tag-container").append(tag);
                    }
                }
                $(".tag i").click(function () {
                    $(this).parent().remove();
                });
        $("#tag-input").val("");
            });
            $(".tag i").click(function () {
                $(this).parent().remove();
            });
    });
    </script>
}
<div class="row">
    <div id="add-form" class="col-md-10 col-md-offset-1">
        @using (Ajax.BeginForm("Add", "Lecture", new AjaxOptions {HttpMethod = "POST", UpdateTargetId = "errors"})){
            <div class="row">
                <div id="box-container" class="col-md-7">
                    <div id="add_title">
                        <div id="box-header" class="col-md-12"><h3>Ders Başlığı</h3><hr /></div>
                        @Html.TextBoxFor(m => m.Title, string.Empty, new {@class = "col-md-8 col-md-offset-1"})
                    </div>
                </div>
                <div id="box-container" class="col-md-5">
                    <div id="category">
                        <div id="box-header" class="col-md-12"><h3>Kategori</h3><hr /></div>
                        @Html.DropDownListFor(x => x.SelectedCategory, Model.DropdownList.ToSelectList(x => x.CategoryName, x => x.CategoryName, "Kategori Seçiniz"), string.Empty, new {id = "category-dropdown", @class = "bootstrap-select col-md-6 col-md-offset-3"})
                    </div>
                </div>
            </div>
            <div class="row">
                <div id="box-container" class="col-md-7">
                    <div id="description">
                        <div id="box-header" class="col-md-12"><h3>Açıklama</h3><hr /></div>
                        @Html.TextBoxFor(m => m.Description, string.Empty, new {@class = "col-md-8 col-md-offset-1"})
                    </div>
                </div>
                <div id="box-container" class="col-md-5">
                    <div id="add_tag">
                        <div id="box-header" class="col-md-12"><h3>Etiketler</h3><hr /></div>
                        <div class="row">
                            @Html.TextBoxFor(m => m.Tags, string.Empty, new {@class = "col-md-8 col-md-offset-1", id = "tag-input"})
                            <button id="tag_button" class="col-md-2">Ekle</button>
                        </div>
                        <div class="row">
                            <div class="col-md-10 col-md-offset-1" id="tag-container">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        }
        <div class="row">
            <div id="box-container" class="col-md-7">
                <div id="file_upload">
                    <div id="box-header" class="col-md-12"><h3>Döküman Ekle</h3><hr /></div>
                    <div class="container">
                        <span class="btn btn-success fileinput-button">
                            <i class="glyphicon glyphicon-plus"></i>
                            <span>Add files...</span>
                            <input id="fileupload" type="file" name="files[]" multiple>
                        </span>
                        <br />
                        <div class="progress">
                            <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
                                <span class="sr-only">0% complete</span>
                            </div>
                        </div>
                        <br />
                        <div class="file_name"></div>
                        <br />
                        <div class="file_type"></div>
                        <br />
                        <div class="file_size"></div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

LectureEdit.css：

    .main-content {
    background: #ebebeb;
}

#add-form {
    margin-bottom: 3em;
}
#add-form #box-container {
    padding-left: 1em;
}
#add-form input  {
    border: 1px solid #ddd;
    background: #f2f2f2;
    margin-top: .75em;
    height: 2em;
    color: #777;
}
#add-form input:focus,#add-form input:active {
    outline: none;
}

.bootstrap-select {
    outline: none !important;
    border: none !important;
}

.bootstrap-select option:hover {
    background: #fff !important;
}


.dropdown-menu li a:hover{
    background: transparent;
}

#add_title,#category,#description,#add_tag,#file_upload {
    min-height: 12em;
    height: auto;
    background: #fff;
    border: 1px #ccc solid;
    padding-bottom: 1em;
}
#add_title,#category {
    margin-top: 3em;
}

#description,#add_tag,#file_upload {
    margin-top: 1em;
}
#box-header {
    margin: 0;
    padding: 0;
}
#box-header h3 {
    margin-left: 1em;
}
#box-header hr {
    border-color: #ccc;
}
#category-dropdown {
    background: #f2f2f2;
    margin-top: .75em;
    height: 2em;
}
#tag_button {
    margin-top: .75em;
    height: 2em;
    background: #27AE60;
    color: #fff;
    border: none;
    border-radius: 0;
}
a.tag {
    float: left;
    margin-left: .5em;
    margin-top: .5em;
    padding: .5em;
    background: #2980b9;
    text-decoration: none;
    color: #ffffff;
}

.tag i {
    margin-left: .5em;
    visibility: hidden;
}
.tag:hover > .fa-times {
    visibility: visible;
}
.fa-times {
    visibility: hidden;
}
#tag-container {
    margin-top: 1em;
}

我不需要添加控制器和模型，它们与此问题无关，但我可以像我关注的那样引用this。

我会很乐意帮助解决这个问题和发现原因的人。

编辑：小提琴：http://jsfiddle.net/8xswoy8x/1/，视图与原始视图不同我认为这是因为从GitHub加载的外部资源，但它可以重现问题。