File upload using MVC 4 with Ajax

Question

I am developing web application using MVC 4 + VS 2012 + Framework 4.5.

I have three partial views, which are rendering dynamically, on my index page based on user action.

Out of three partial views, one partial view has Upload File functionality with some entry fields like textboxes.

Problem:

When user click on save button (which is present on the partial view itself). I want to save entry field into my database and stored uploaded file on shared folder.

I want to implement this using Ajax (After uploading the file and save data, user should be on the same view).

How can I implement the same? JQuery solution would be fine.

I have tried with @Ajax.BeginForm but after uploading of file, full post back happen.

HTML5 may not be support with earlier/old browsers. kindly suggest something which support with old browsers. — sanjay jadam
– sanjay jadam, Commented Dec 6, 2013 at 10:09
Ajax Multiple file upload script with Progress bar, Drag and Drop in mvc 4 — Sender
– Sender, Commented Jun 23, 2014 at 4:28
Possible duplicate of jQuery ajax upload file in asp.net mvc — Liam
– Liam, Commented Aug 14, 2017 at 14:05

Uthaiah · Accepted Answer · 2014-04-30 10:26:19Z

76

Here is my small working sample, which uploads multiple files and uploads in a folder called as 'junk'

Client Side....

    <html>
    <head>
    <title>Upload Example</title>
    <script src="~/Scripts/jquery-2.1.0.intellisense.js"></script>
    <script src="~/Scripts/jquery-2.1.0.js"></script>
    <script src="~/Scripts/jquery-2.1.0.min.js"></script>
    <script>
    $(document).ready(function () {
        $("#Upload").click(function () {
            var formData = new FormData();
            var totalFiles = document.getElementById("FileUpload").files.length;
            for (var i = 0; i < totalFiles; i++)
            {
                var file = document.getElementById("FileUpload").files[i];

                formData.append("FileUpload", file);
            }
            $.ajax({
                type: "POST",
                url: '/Home/Upload',
                data: formData,
                dataType: 'json',
                contentType: false,
                processData: false,
                success: function (response) {
                    alert('succes!!');
                },
                error: function (error) {
                    alert("errror");
                }
            });
        });
    });

</script>
</head>
<body>
    <input type="file" id="FileUpload" multiple />
    <input type="button" id="Upload" value="Upload" />
</body>
</html>

Server Side....

public class HomeController : Controller
{
    [HttpPost]
    public void Upload( )
    {
        for( int i = 0 ; i < Request.Files.Count ; i++ )
        {
            var file = Request.Files[i];

            var fileName = Path.GetFileName( file.FileName );

            var path = Path.Combine( Server.MapPath( "~/Junk/" ) , fileName );
            file.SaveAs( path );    
        }

    }
}

answered Apr 30, 2014 at 10:26

Uthaiah

1,31313 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

David Christopher Reynolds Over a year ago

Amazing work - I've tried for months to get this to work. Many thanks!

Shadi Alnamrouti Over a year ago

Your code uploads the file successfully, but I always get "errror". My question is how to send the response from the controller to the ajax call?

RiaanDP Over a year ago

Thanks for this. @shadi1024 to return a success result change the Upload action method signature to return an ActionResult and then return a Json result e.g. return Json(new { result = "some_info" });

Hajjat Over a year ago

Man, wish I came across this earlier! Best'est answer on Internet!

Marthijn · Accepted Answer · 2013-12-06 10:05:03Z

-2

This article helped me out: http://www.matlus.com/html5-file-upload-with-progress/ The ActionResult is still ActionResult Upload(HttpPostedFileBase file) {...}

answered Dec 6, 2013 at 10:05

Marthijn

3,4442 gold badges34 silver badges49 bronze badges

Comments

Qiu · Accepted Answer · 2015-07-14 06:21:36Z

-4

[HttpPost]
    public void Upload( )
    {
        for( int i = 0 ; i < Request.Files.Count ; i++ )
        {
            var file = Request.Files[i];

            var fileName = Path.GetFileName( file.FileName );

            var path = Path.Combine( Server.MapPath( "~/Junk/" ) , fileName );
            file.SaveAs( path );    
        }

    }

edited Jul 14, 2015 at 6:21

Qiu

5,80210 gold badges52 silver badges58 bronze badges

answered Jul 14, 2015 at 6:05

samir

9

Collectives™ on Stack Overflow

File upload using MVC 4 with Ajax

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest