3

我正在使用 uploadify 批量上传文件，但出现 302 重定向错误。我假设这是因为脚本调用中没有传回一些 asp.net 身份验证 cookie 令牌。

我已经在常规的裸骨 mvc3 应用程序中工作，但是当我尝试将其集成到安全的 asp.net mvc3 应用程序中时，它会尝试重定向到帐户/登录。

我有一个身份验证令牌 (@auth)，它确实在视图中以长字符串的形式返回，但我仍然收到 302 重定向错误。

任何想法如何发送 cookie 身份验证数据？

看法：

 @{
     string auth = @Request.Cookies[FormsAuthentication.FormsCookieName] == null ? string.Empty : Request.Cookies[FormsAuthentication.FormsCookieName].Value;
     }


<script type="text/javascript">
    jQuery.noConflict();
    jQuery(document).ready(function () {
        jQuery("#bulkupload").uploadify({
            'uploader': '@Url.Content("~/Scripts/uploadify.swf")',
            'cancelImg': '/Content/themes/base/images/cancel.png',
            'buttonText': 'Browse Files',
            'script': '/Creative/Upload/',
            scriptData: { token: "@auth" }, 
            'folder': '/uploads',
            'fileDesc': 'Image Files',
            'fileExt': '*.jpg;*.jpeg;*.gif;*.png',
            'sizeLimit': '38000',
            'multi': true,
            'auto': true,
              'onError'     : function (event,ID,fileObj,errorObj) {
      alert(errorObj.type + ' Error: ' + errorObj.info);
    }
        });
    }); 
    </script>

控制器：

public class CreativeController : Controller
{
    public string Upload(HttpPostedFileBase fileData, string token)
    {
      ...
    }
}

更新：好的，这适用于 IE9，但不适用于 Chrome（Chrome 会抛出 302）。FF 甚至不渲染控件。

有人知道如何在 Chrome 和 FF 的最新版本中使用它吗？

4

1 回答 1

5

当我尝试将 uploadify 与 asp.net mvc3 一起使用时，我遇到了类似的问题。经过大量谷歌搜索后，我发现这似乎可行。它基本上涉及声明一个自定义属性，然后将身份验证 cookie 显式传递到 Uploadify 的 HTTP Post 并通过自定义属性手动处理 cookie。

首先声明这个自定义属性：

/// <summary>
/// A custom version of the <see cref="AuthorizeAttribute"/> that supports working
/// around a cookie/session bug in Flash.  
/// </summary>
/// <remarks>
/// Details of the bug and workaround can be found on this blog:
/// http://geekswithblogs.net/apopovsky/archive/2009/05/06/working-around-flash-cookie-bug-in-asp.net-mvc.aspx
/// </remarks>
[AttributeUsage(AttributeTargets.Class | AttributeTargets.Method, Inherited = true, AllowMultiple = true)]
public class TokenizedAuthorizeAttribute : AuthorizeAttribute
{
    /// <summary>
    /// The key to the authentication token that should be submitted somewhere in the request.
    /// </summary>
    private const string TOKEN_KEY = "authCookie";

    /// <summary>
    /// This changes the behavior of AuthorizeCore so that it will only authorize
    /// users if a valid token is submitted with the request.
    /// </summary>
    /// <param name="httpContext"></param>
    /// <returns></returns>
    protected override bool AuthorizeCore(HttpContextBase httpContext)
    {
        string token = httpContext.Request.Params[TOKEN_KEY];

        if (token != null)
        {
            FormsAuthenticationTicket ticket = FormsAuthentication.Decrypt(token);

            if (ticket != null)
            {
                var identity = new FormsIdentity(ticket);
                string[] roles = System.Web.Security.Roles.GetRolesForUser(identity.Name);
                var principal = new GenericPrincipal(identity, roles);
                httpContext.User = principal;
            }
        }

        return base.AuthorizeCore(httpContext);
    }
}

然后声明此 Action 以将身份验证 cookie 传递到您的 ViewData，以便您可以将其传递给 Uploadify 小部件。这也将是您稍后调用以实例化 Uploadify 小部件的操作。

    [Authorize]
    public ActionResult UploadifyUploadPartial()
    {
        ViewBag.AuthCookie = Request.Cookies[FormsAuthentication.FormsCookieName] == null
                                 ? string.Empty
                                 : Request.Cookies[FormsAuthentication.FormsCookieName].Value;
        return PartialView("UploadifyUpload");
    }

这是 UploadifyUpload 视图的代码。它基本上是设置 Uploadify 的 JavaScript 的包装器。我复制了我的没有更改，因此您必须根据您的应用程序对其进行调整。需要注意的重要一点是，您通过UploadifyUploadPartial 操作中的 ViewData将 传递authCookie到属性中。scriptData

@if (false)
{
    <script src="../../Scripts/jquery-1.5.1-vsdoc.js" type="text/javascript"></script>
}
@{
    ViewBag.Title = "Uploadify";
}
<script src="@Url.Content("~/Scripts/plugins/uploadify/swfobject.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/plugins/uploadify/jquery.uploadify.v2.1.4.min.js")" type="text/javascript"></script>
<link href="@Url.Content("~/Scripts/plugins/uploadify/uploadify.css")" rel="stylesheet" type="text/css" />
<script>
    $(document).ready(function () {
        CreateUploadifyInstance("dir-0");
    });
    function CreateUploadifyInstance(destDirId) {
        var uploader = "@Url.Content("~/Scripts/plugins/uploadify/uploadify.swf")";
        var cancelImg = "@Url.Content("~/Scripts/plugins/uploadify/cancel.png")";
        var uploadScript = "@Url.Content("~/Upload/UploadifyUpload")";
        var authCookie = "@ViewBag.AuthCookie";
        $('#uploadifyHiddenDummy').after('<div id="uploadifyFileUpload"></div>');
        $("#uploadifyFileUpload").uploadify({
            'uploader': uploader,
            'cancelImg': cancelImg,
            'displayData': 'percentage',
            'buttonText': 'Select Session...',
            'script': uploadScript,
            'folder': '/uploads',
            'fileDesc': 'SunEye Session Files',
            'fileExt': '*.son2',
            'scriptData'  : {'destDirId':destDirId, 'authCookie': authCookie},
            'multi': false,
            'auto': true,
            'onCancel': function(event, ID, fileObj, data) {
                //alert('The upload of ' + ID + ' has been canceled!');
            },
            'onError': function(event, ID, fileObj, errorObj) {
                alert(errorObj.type + ' Error: ' + errorObj.info);
            },
            'onAllComplete': function(event, data) {
                $("#treeHost").jstree("refresh");
                //alert(data.filesUploaded + ' ' + data.errors);
            },
            'onComplete': function(event, ID, fileObj, response, data) {
                alert(ID + " " + response);
            }
        });
    }
    function DestroyUploadifyInstance() {
        $("#uploadifyFileUpload").unbind("uploadifySelect");
        swfobject.removeSWF('uploadifyFileUploadUploader');
        $('#uploadifyFileUploadQueue').remove();
        $('#uploadifyFileUploadUploader').remove();
        $('#uploadifyFileUpload').remove();
    }
</script>
<div id="uploadifyHiddenDummy" style="visibility:hidden"></div>
<div id="uploadifyFileUpload">
</div>

对于 Uploadify Posts 到的操作，使用新TokenizedAuthorize属性而不是Authorize属性：

    [HttpPost]
    [TokenizedAuthorize]
    public string UploadifyUpload(HttpPostedFileBase fileData)
    {
        FormsAuthenticationTicket ticket = FormsAuthentication.Decrypt(Request.Form["authCookie"]);
        if (ticket != null)
        {
            var identity = new FormsIdentity(ticket);
            if (!identity.IsAuthenticated)
            {
                return "Not Authenticated";
            }
        }
        // Now parse fileData...
    }

最后，要使用我们编写的代码，通过 Html.Action Helper 在您希望托管 Uploadify Widget 的任何 View 上调用 UploadifyUploadPartial Action：

@Html.Action("UploadifyUploadPartial", "YourUploadControllerName")

在这一点上你应该很高兴。该代码应该可以在 FF、Chrome 和 IE 9 中运行。如果您有问题，请告诉我。

于 2012-04-15T05:20:36.007 回答