MVC3 中的 Uploadify 不起作用答案

【问题标题】：Uploadify in MVC3 does not workMVC3 中的 Uploadify 不起作用
【发布时间】：2013-09-23 18:35:19
【问题描述】：

不能让它做任何事情。当我单击“上传文件”时，绝对没有任何反应，而且我看不到任何闪存呈现到屏幕上。我相信这在某种程度上与 jquery 有关，但我不确定。请帮忙！如果有人可以给我邮寄一个简单的 VS2010 解决方案，上传到 gmail.com 的 infinitimods 工作，我会更加感激！非常感谢！

My Layout file:

    <!DOCTYPE html>
    <html>
    <head>
        <title>@ViewBag.Title</title>
        <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
        <link type="text/css" rel="Stylesheet" media="screen" href="/Scripts/uploadify/uploadify.css" />
        <script type="text/javascript" src="/Scripts/uploadify/swfobject.js"></script>
        <script type="text/javascript" src="/Scripts/uploadify/jquery.uploadify.v2.1.4.min.js"></script>
        <script type="text/javascript" src="/Scripts/uploadify/jquery-1.4.2.min.js"></script>
    </head>

    <body>
        @RenderBody()
    </body>
    </html>



My index file:

    @{
        ViewBag.Title = "Index";
        Layout = "~/Views/Shared/_Layout.cshtml";
    }

    <h2>Index</h2>

    @using (Html.BeginForm("UploadFile", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
    {        
        <script type="text/javascript">
            $(document).ready(function () {

                $("#file_upload").uploadify({
                    'uploader': '~/Scripts/uploadify/uploadify.swf',
                    'cancelImg': '~/Scripts/uploadify/images/cancel.png',
                    'buttonText': 'Upload foto',
                    'script': '/Home/UploadFiles',
                    'folder': '/Content/upload',
                    'fileDesc': 'Image Files',
                    'fileExt': '*.jpg;*.jpeg;*.gif;*.png; *.txt;',
                    'scriptData': { 'thisGuid': $("input#Id").val() },
                    'multi': false,
                    'auto': true,
                    'onError': function (event, queueID, fileObj, errorObj) {
                        alert("Error!!! Type: [" + errorObj.type + "] Info [" + errorObj.info + "]");
                    }              
                });

                $("#btnSave").button().click(function (event) {
                    $('#file_upload').uploadifyUpload();
                });


            }); 

        </script>

        <input id="file_upload" type="file" />

        <input type="button" id="btnSave" value="Upload file" />

        <input id="Id" name="Id" type="hidden" value="5168e-yada-yada" />
    }

My controller:

public class HomeController : Controller
{
    /// <summary>
    /// 
    /// </summary>
    /// <returns></returns>
    [HttpGet]
    public ActionResult Index()
    {
        return View("Index");
    }

    /// <summary>
    /// 
    /// </summary>
    /// <param name="fileData"></param>
    /// <param name="form"></param>
    /// <returns></returns>
    [HttpPost]
    public string UploadFile(HttpPostedFileBase fileData, FormCollection form)
    {
        return "ok";
    }
}

【问题讨论】：

标签： asp.net-mvc-3 razor uploadify

【解决方案1】：

Uploadify 需要 jQuery。这意味着您需要在uploadify 脚本之前包含jQuery 脚本。如果您查看过您的 javascript 调试控制台，您会看到此错误。

所以，布局：

<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Scripts/uploadify/uploadify.css")" type="text/css" rel="stylesheet" media="screen" />
    <script type="text/javascript" src="@Url.Content("~/Scripts/uploadify/swfobject.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/uploadify/jquery-1.4.2.min.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/uploadify/jquery.uploadify.v2.1.4.min.js")"></script>
</head>

<body>
    @RenderBody()
</body>
</html>

控制器：

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public ActionResult UploadFile(HttpPostedFileBase fileData, string thisGuid)
    {
        if (fileData != null && fileData.ContentLength > 0)
        {
            var appData = Server.MapPath("~/app_data");
            var file = Path.Combine(appData, Path.GetFileName(fileData.FileName));
            fileData.SaveAs(file);
        }
        return Json(new { status = true });
    }
}

和视图：

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<script type="text/javascript">
    $(document).ready(function () {
        $('#file_upload').uploadify({
            'uploader': '@Url.Content("~/Scripts/uploadify/uploadify.swf")',
            'cancelImg': '@Url.Content("~/Scripts/uploadify/images/cancel.png")',
            'buttonText': 'Select photo',
            'script': $('form').attr('action'),
            'fileDesc': 'Image Files',
            'fileExt': '*.jpg;*.jpeg;*.gif;*.png; *.txt;',
            'multi': false,
            'auto': false,
            'onError': function (event, queueID, fileObj, errorObj) {
                alert("Error!!! Type: [" + errorObj.type + "] Info [" + errorObj.info + "]");
            }
        });

        $('form').submit(function () {
            $('#file_upload').uploadifySettings('scriptData', { thisGuid: $('#id').val() });
            $('#file_upload').uploadifyUpload();
            return false;
        });
    }); 
</script>


<h2>Index</h2>

@using (Html.BeginForm("UploadFile", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
{        
    <input id="id" name="id" type="hidden" value="5168e-yada-yada" />
    <input id="file_upload" type="file" name="fileData" />
    <input type="submit" value="Upload file" />
}

如果您想在用户选择照片时启动上传过程，您可以去掉表单和提交按钮，并将auto 属性设置为true：

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<script type="text/javascript">
    $(document).ready(function () {
        $('#file_upload').uploadify({
            'uploader': '@Url.Content("~/Scripts/uploadify/uploadify.swf")',
            'cancelImg': '@Url.Content("~/Scripts/uploadify/images/cancel.png")',
            'buttonText': 'Select photo',
            'script': $('form').attr('action'),
            'fileDesc': 'Image Files',
            'fileExt': '*.jpg;*.jpeg;*.gif;*.png; *.txt;',
            'multi': false,
            'auto': true,
            'scriptData': { thisGuid: $('#id').val() },
            'onError': function (event, queueID, fileObj, errorObj) {
                alert("Error!!! Type: [" + errorObj.type + "] Info [" + errorObj.info + "]");
            }
        });
    }); 
</script>


<h2>Index</h2>

<input id="id" name="id" type="hidden" value="5168e-yada-yada" />
<input id="file_upload" type="file" name="fileData" />

别忘了查看uploadify documentation 以更好地了解不同选项的用途，您还可以查看一些示例。

【讨论】：

【解决方案2】：

您需要解决 asp.net 和 flash 的错误。

这篇文章帮助了我一次：Working around flash cookie bug

也许这是一个更好的解决方案：jquery file upload

【讨论】：