Uploading multiple files using Uploadfy in ASP.NET MVC

2

How to implement multi-file upload with uploadf ? I find it very interesting to use the upload bars etc.

is giving this error:

Thisismycontroller:

You may notice that you have many error messages as well.

View Code:

<script type="text/javascript">
    $(function () {
        $('#file_upload').uploadify({
            'swf': "@Url.Content("~/Content/UploadifyContent/uploadify.swf")",
            'cancelImg': "@Url.Content("~/Content/UploadifyContent/uploadify-cancel.png")",
            'uploader': "@Url.Action("Upload", "Photo")",            
            'buttonText': 'SELECIONAR',
            'onUploadSuccess': function (file, data, response) {
                $("#uploaded").append("<img src='" + data + "' alt='Uploaded Image' />");
            }
        });
    });
</script>
    
asked by anonymous 13.03.2014 / 21:29

1 answer

4

The original response recommended using the NuGet package:

link

But it is old and may not work if the jQuery version is newer. Then download the Zip at this address:

link

Place the files in your project as follows:

  • ~/Scripts/jquery.uploadify.js
  • ~/Content/UploadifyContent/uploadify.swf
  • ~/Content/UploadifyContent/uploadify-cancel.png
  • ~/Content/UploadifyContent/uploadify.css

View example

@{
    ViewBag.Title = "Index";
}

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Upload Files</title>
    @Scripts.Render("~/bundles/jquery")
    <script type="text/javascript" src="@Url.Content("~/Scripts/jquery.uploadify.js")"></script>       
    <link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/UploadifyContent/uploadify.css")" />

    <script type="text/javascript">
        $(function () {
            $('#file_upload').uploadify({
                'swf': "@Url.Content("~/Content/UploadifyContent/uploadify.swf")",
                'cancelImg': "@Url.Content("~/Content/UploadifyContent/uploadify-cancel.png")",
                'uploader': "@Url.Action("Upload", "Home")",
                'onUploadSuccess' : function(file, data, response) {
                     $("#uploaded").append("<img src='" + data + "' alt='Uploaded Image' />");
                }
            });
        });
    </script>

</head>
<body>
    <div>
        Click Select files to upload files.
        <input type="file" name="file_upload" id="file_upload" />
    </div>
    <div id="uploaded">
    </div>
</body>
</html>

Controller Example (Controllers \ HomeController.cs)

public ActionResult Index()
{
    return View();
}

public ActionResult Upload()
{
    var file = Request.Files["Filedata"];
    string savePath = Server.MapPath(@"~\Content\" + file.FileName);
    file.SaveAs(savePath);

    return Content(Url.Content(@"~\Content\" + file.FileName));
}
    
13.03.2014 / 21:34