Fineuploader和MVC4

时间:2013-02-19 09:59:09

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

我尝试在我的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.csFineUploadResult.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

1 个答案:

答案 0 :(得分:4)

你似乎弄乱了你的脚本内容(顺序和一切)。您应该选择是否需要使用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>

你的控制器动作似乎也需要一些额外的整数参数。如果您未在请求中指定它,则此请求显然会失败。在这种情况下使用可以为空的整数。