Uploadify in MVC3 does not work

问题

Can't get this to do anything. When I click 'Upload File' absolutely nothing happens as well as I don't see any of the flash rendered to the screen. I believe this is somehow related to the jquery, but I am not sure. PLEASE HELP! If someone can mail me a simple VS2010 solution with uploadify working to infinitimods at gmail.com that actually works I'd appreciate even more! Thanks a bunch!

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";
    }
}

回答1:

Uploadify requires jQuery. This means that you need to include the jQuery script before the uploadify script. If you had looked in your javascript debugging console you would have seen this error.

So, the layout:

<!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>

The controller:

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 });
    }
}

and the view:

@{
    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" />
}

And if you want to kick the uploading process when the user selects a photo you could get rid of the form and the submit button and set the auto property to 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" />

Also don't forget to checkout the uploadify documentation to better understand what the different options are used for and also you can see some examples.

回答2:

You need to work around a bug with asp.net and flash.

This article helped me once: Working around flash cookie bug

Maybe this is a better solution: jquery file upload

来源：https://stackoverflow.com/questions/10116793/uploadify-in-mvc3-does-not-work

标签

asp.net-mvc-3

razor

uploadify