Fineuploader 和 MVC4答案

【问题标题】：Fineuploader and MVC4Fineuploader 和 MVC4
【发布时间】：2013-02-03 23:11:53
【问题描述】：

我尝试在我的 MVC4 项目中实现Fineuploader，但它总是无法上传。我做了什么：

在我的视图中添加了 css 和 js 文件：

<link href="~/Content/fineuploader.css" rel="stylesheet" />
<script src="~/Scripts/js/util.js"></script>
<script src="~/Scripts/js/button.js"></script>
<script src="~/Scripts/js/dnd.js"></script>
<script src="~/Scripts/js/handler.base.js"></script>
<script src="~/Scripts/js/handler.form.js"></script>
<script src="~/Scripts/js/handler.xhr.js"></script>
<script src="~/Scripts/js/header.js"></script>
<script src="~/Scripts/js/jquery-plugin.js"></script> 
<script src="~/Scripts/js/uploader.basic.js"></script>
<script src="~/Scripts/js/uploader.js"></script>

添加了上传按钮和脚本执行的代码（我认为这不对？）

<script>
    function createUploader() {
        var uploader = new qq.FineUploader({
            element: document.getElementById('fine-uploader'),
            debug: true,
            request: {
                endpoint: '/Upload/UploadFile/'
            }
        });
    }

    window.onload = createUploader;
</script>

将 C# 文件添加到我的项目 FineUpload.cs、FineUploadResult.cs 和控制器 UploadController.cs。我还添加了一条到控制器的路由：

routes.MapRoute(
                    name: "upload",
                    url: "Upload/UploadFile",
                    defaults: new { controller = "Upload", action = "UploadFile" }
                );

控制器是：

public class UploadController : Controller
{
    [HttpPost]
    public FineUploaderResult UploadFile(FineUpload upload, string extraParam1, int extraParam2)
    {
      ...
    }
}

但是UploadFile 永远不会在服务器上调用。

【问题讨论】：

尝试在您的端点中将url: "Upload/UploadFile" 替换为url: "/Upload/UploadFile"
我做了，但控制器没有执行。我在开头添加了路线。也许它与动作中的参数有关？
是的。可以这样试试吗：public FineUploaderResult UploadFile(FineUpload upload, string extraParam1="", int? extraParam2=0)
不成功：它总是路由到另一个控制器 /Account/Login?ReturnUrl=...
我将fineuploader大文件的示例代码添加到我的web.config文件中。这是路由的问题！现在可以了。

标签： c# javascript asp.net asp.net-mvc-4 upload

【解决方案1】：

您似乎弄乱了您的脚本内容（顺序和所有内容）。您应该选择是否需要使用 FineUploaderBasic 模式、FineUploader 模式或 jQuery 插件模式。鉴于您的代码，您似乎正在使用标准模式。

这是一个完整的工作示例和最少的标记：

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <title>Index</title>
    <link href="~/Content/fineuploader.css" rel="stylesheet" />
</head>
<body>
    <div id="fine-uploader">Click me to upload a file</div>

    <script src="~/Scripts/js/header.js"></script>
    <script src="~/Scripts/js/util.js"></script>
    <script src="~/Scripts/js/button.js"></script>
    <script src="~/Scripts/js/handler.base.js"></script>
    <script src="~/Scripts/js/handler.form.js"></script>
    <script src="~/Scripts/js/handler.xhr.js"></script>
    <script src="~/Scripts/js/uploader.basic.js"></script>
    <script src="~/Scripts/js/dnd.js"></script>
    <script src="~/Scripts/js/uploader.js"></script> 
    <script type="text/javascript">
        function createUploader() {
            var uploader = new qq.FineUploader({
                element: document.getElementById('fine-uploader'),
                debug: true,
                request: {
                    endpoint: '@Url.Action("UploadFile", "Uploader")'
                }
            });
        }
        createUploader();
    </script>
</body>
</html>

您的控制器操作似乎也采用了一些额外的整数参数。如果你没有在请求中指定它，这个请求显然会失败。在这种情况下使用可为空的整数。

【讨论】：

我的控制器动作仍未执行？我添加了路由添加RegisterRoutes的开头
什么路由？您无需为此添加任何路由。只需使用默认路由。摆脱您的自定义路线。还要查看 FireBug 以了解向服务器发出的请求以及服务器对该请求的响应。
我必须添加一个特定的路由，因为它路由到另一个控制器 /Account/Login?ReturnUrl=... 我认为我的路由现在是错误的？请看我的问题。我已经添加了路由和控制器。
哦，等一下。您的目标控制器操作是否需要对用户进行身份验证？它是否用[Authorize] 属性装饰？另外，您使用哪个网络浏览器来测试这个？但是要回答您的问题：您根本不需要任何路由。默认值应该足够了。此外，您的控制器操作似乎采用了一些整数参数，但在请求中没有指定此参数的值，这意味着您的操作将永远不会被调用，因为默认模型绑定器将崩溃，告诉您所需的参数 extraParam2 不是提供。
我将fineuploader大文件的示例代码添加到我的web.config文件中。这是路由的问题！现在可以了。