Question

我有一个可以使用拖放功能上传文件的部分视图。我写了一个这样的剧本：

<script>
    $(function () {

        $('#dropArea').filedrop({
            url: '@Url.Action("Desert1Content")',
            allowedfiletypes: ['image/jpeg', 'image/png', 'image/gif'],
            allowedfileextensions: ['.jpg', '.jpeg', '.png', '.gif'],
            paramname: 'files',
            maxfiles: 5,
            maxfilesize: 5, 
            dragOver: function() {
                $('#dropArea').addClass('active-drop');
            },
            dragLeave: function() {
                $('#dropArea').removeClass('active-drop');
            },
            drop: function() {
                $('#dropArea').removeClass('active-drop');
            },
            afterAll: function(e) {
                $('#dropArea').html('file uploaded successfully');
            },
            uploadFinished: function(i, file, response, time) {
                $('#uploadList').append('<li class="list-group-item">' + file.name + '</li>');
            }
        });
    });
</script>

当我独立运行页面时，此代码可以正常工作。但是当在视图中加载此部分视图并将文件拖入上传区域时，我收到此错误：

这是我的控制者：

public PartialViewResult Desert1Content(IEnumerable<HttpPostedFileBase> files)
{
    if (files!=null)
    {
        foreach (var file in files)
        {
            string filePath = Guid.NewGuid() + Path.GetExtension(file.FileName);
            file.SaveAs(Path.Combine(Server.MapPath("~/UploadFiles"), filePath));

        }
        return PartialView();
    }
    return PartialView();
}

更新，我想我发现了这个问题。但不是解决方案。问题是我将jquery.js文件添加到我的共享布局中。运行局部视图而不使用共享布局工作没有任何问题。当我在这个局部视图上使用共享布局（用于测试）时。问题出现了。问题是，为了使这项工作，应该在这个页面上添加jquery-1.10.2.min.js和jquery.filedrop.js。如果在共享布局中引用文件，则脚本将不起作用。这会产生冲突并犯这个错误。

Answer 1

尝试使用

<script type="text/javascript" src="<path to your .js file>" defer></script>

仅适用于外部脚本的defer属性（即scr必须存在于脚本声明中）将推迟脚本的执行，直到页面加载完毕。 w3schools defer attribute

Since partial views load before any parent view，使用defer将确保您想要的内容。

无论如何，如果仍然不起作用，我建议你只需在其中的部分视图中引用你需要的Javascript文件（JQuery和其他脚本）。

试试看这个： How to use jquery in partial view asp.net mvc 4

部分视图中的Jquery拖放问题

1 个答案: