Uploadify在MVC3不起作用(Uploadify in MVC3 does not work

无法获得此做任何事情。当我点击“上传文件”绝对没有任何反应，以及我没有看到任何渲染到屏幕上的闪光。我相信这是某种相关的jQuery的，但我不知道。请帮忙！如果有人可以邮寄我uploadify一个简单的解决方案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";
    }
}

Answer 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文档，以便更好地了解使用什么不同的选项，你也可以看到一些例子。