Question

我正在使用jQuery fileupload插件（https://github.com/blueimp/jQuery-File-Upload）和MVC4应用程序。

文件上传功能（上传文件的上传和表格）包含在部分视图中。

所以我有很多包含文件上传局部视图的视图。上载文件时，会触发附件控制器的“保存”操作。这将处理文件的存储，然后检索站点的此特定区域的更新文件列表。然后将视图返回到fileupload jQuery，然后将Html注入父页面中的div（#_attachments）。

所有这一切都正常，因为一切都正确呈现。我遇到的问题是，在执行文件上传并通过jQuery重新加载部分视图后，文件上载不再有效。

看起来这可能是由于事件不再附加到#fileUpload控件。我尝试过使用'on'方法，但这似乎也不起作用。

部分查看脚本

$(function () {
        $('#fileUpload').fileupload({
            url: "/Attachment/Save",
            done: function (e, data) {
                // "data.result" will contain the response data
                $("#fileUploadProgress").hide();
                $("#_attachments").html(data.result);
            },
            progressall: function (e, data) {
                var progress = parseInt(data.loaded / data.total * 100, 10);
                $("#fileUploadProgress").show();
                $("#fileUploadProgress .bar").css("width", progress + "%");
            }
        });
    });

控制器/动作

[HttpPost]
        public ActionResult Save()
        {

            // Get a reference to the file that our jQuery sent.  Even with multiple files, they will all be their own request and be the 0 index
            HttpPostedFileBase file = HttpContext.Request.Files[0];

            int ncpId = Convert.ToInt32(Request.Form["ncpId"]);
            int stage = Convert.ToInt32(Request.Form["stage"]);

            ncpRepository.SaveAttachmentToDb(file, CurrentUser.UserId, ncpId, stage);

            //return the partial view to refresh the list of files
            var attachments = ncpRepository.GetAttachmentsForRecord(ncpId);
            var attachmentsViewModel = AutoMapper.Mapper.Map<IQueryable<Attachment>, List<AttachmentViewModel>>(attachments);

            ViewData["Stage"] = stage;

            return PartialView("_StageAttachments", attachmentsViewModel);
        }

Answer 1

看来这可能是因为事件不再附加到#fileUpload控件。

是的，这就是它的样子。现在您的代码存在一些问题。第一个问题是你提到这个javascript代码在局部视图中。但部分视图不应包含任何脚本。 Javascripts属于单独的文件。此外，您似乎使用了$('#fileUpload')选择器，它是一个id选择器。然后你说你有很多部分观点。所以你可能已经破坏了DOM，因为你的整个HTML中只能有一个具有指定id的元素。

因此，让我们通过将此脚本移动到一个单独的文件（从主视图中引用一次）开始修复这种情况，并将文件上载控件重新附加到DOM中的新元素：

var attachFileUploads = function() {
    $('.fileUpload').fileupload({
        url: "/Attachment/Save", // TODO: Never hardcode an url like that, read it from an HTML 5 data-* attribute on the corresponding file input such as data-url="@Url.Action("Save", "Attachment")"
        done: function (e, data) {
            $("#fileUploadProgress").hide();
            $("#_attachments").html(data.result);
            attachFileUploads(); // <!-- reattach the fileupload plugin
        },
        progressall: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $("#fileUploadProgress").show();
            $("#fileUploadProgress .bar").css("width", progress + "%");
        }
    });
};

$(attachFileUploads);

在这个例子中，我使用了一个类选择器$('.fileUpload')，它假设你可以有多个文件输入。确保你已经为这个课程分配了它，并且你已经摆脱了前面提到的必须是唯一的id。

部分视图加载时jQuery事件变得独立

1 个答案: