Question

我正在构建一个ASP.NET MVC应用程序，我正在使用动态添加到页面的PartialView上的jQuery Blueimp插件。

根据插件的文档，我需要这样做：

$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                $('<p/>').text(file.name).appendTo(document.body);
            });
        }
    });
});

但这当然不适用于我的情况，因为我的PartialView最初并不存在于页面上。

所以我的问题是，如何获取动态添加的文件输入，并在其上初始化.fileupload。我按照Archer的建议尝试了以下方法，但它不起作用：

$(function () {
    $('#campaign-form-wrap').on("change", "#fileUpload", function () {
        $('#fileUpload').fileupload({
            dataType: "json",
            url: "/ZenosIntranet/Campaign/ConvertExcelToVehicleDriverSummariesJson",
            limitConcurrentUploads: 1,
            sequentialUploads: true,
            maxChunkSize: 10000,
            done: function (e, data) {
                $.each(data.results, function() {
                    alert("boo");
                });
            }
        });
    });
});

我还确保我按照this question上的答案建议正确排序脚本。但仍然没有去。我现在收到以下错误：

未捕获TypeError：对象[object Object]没有方法'fileupload'

更新：我认为上面的语法不正确，因为即使我在Chrome控制台中执行this.siblings()，我也会收到错误：

TypeError：Object＃没有方法'siblings'

这告诉我代码认为我的这个对象有一个名为siblings或fileupload的方法 - 但它们呢？我知道在fileupload的情况下，我想将它附加到该控件。

Answer 1

您的事件处理程序实际上是在尝试立即运行该函数。您需要将其包装在匿名函数中，以便仅在事件发生时调用...

$(function () {
    $('#campaign-form-wrap').on("submit", "#fileUpload", function() {
        $(this).fileupload({
            dataType: "json",
            url: "/ZenosIntranet/Campaign/ConvertExcelToVehicleDriverSummariesJson",
            limitConcurrentUploads: 1,
            sequentialUploads: true,
            maxChunkSize: 10000,
            done: function(e, data) {
                $.each(data.results, function() {
                    alert("boo");
                });
            }
        });
    });
});

Answer 2

因此，经过与Archer和其他许多人的长时间讨论，我们发现了问题。

输入表单来自我的ASP.NET MVC应用程序中的PartialView.cshtml。尽管我的插件初始化代码包含在jQuery的.on()函数中，但插件仍然在初始页面加载时尝试初始化。

我不确定为什么会这样，我的猜测就是这个插件是这样设计的！

所以我做的是，我从MVC的_Layout.cshtml移动了与插件相关的所有脚本文件，并将它们放在我的_PartialView.cshtml中。

这迫使插件脚本在部分出现在页面上时立即运行，然后插件工作正常。

注意：您仍需要确保脚本文件的顺序正确。

的jQuery
Widget UI
iFrame Transport
文件上传

我希望这会有所帮助。

通过jQuery选择动态HTML元素

2 个答案: