2

我正在使用带有 MVC4 应用程序的 jQuery 文件上传插件 ( https://github.com/blueimp/jQuery-File-Upload )。

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

所以我有许多包含文件上传部分视图的视图。上传文件时，会触发 Attachment 控制器的 Save 操作。这将处理文件的存储，然后检索站点特定区域的更新文件列表。然后视图返回到文件上传 jQuery，然后将 Html 注入到父页面 (#_attachments) 中的 div 中。

所有这一切都很好，因为一切都正确呈现。我遇到的问题是，在执行文件上传并通过 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);
        }
4

1 回答 1

1

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

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

因此，让我们通过将此脚本移动到一个单独的文件（曾经从您的主视图中引用一次）来解决这种情况，这会将 fileupload 控件重新附加到 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前面提到的必须是唯一的。

于 2013-08-07T11:08:21.777 回答