Upload multiple files using Uploadfy in ASP.NET MVC

Question

Upload multiple files using Uploadfy in ASP.NET MVC

Asked 10 years, 3 months ago

Viewed 1,354 times

2

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

is making this mistake:

This is my controller:

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>

1 answer

Browser other questions tagged c# html asp.net-mvc html5 upload

You are not signed in. Login or sign up in order to post.

by Leonel Sanches da Silva • **88,623** points · Answer 1 · 2014-03-13T20:34:45+00:00

The original answer recommended using the Nuget package:

https://www.nuget.org/packages/Uploadfy/

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

http://www.uploadify.com/download/

Put the files into your project as follows:

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

Example of View

@{
    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>

Example of Controller (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));
}