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, Dec 06 '13 at 10:09
[Ajax Multiple file upload script with Progress bar, Drag and Drop in mvc 4](http://www.jquery2dotnet.com/2012/09/ajax-multiple-file-upload-script-with.html) — Sender, Jun 23 '14 at 04:28
Possible duplicate of [jQuery ajax upload file in asp.net mvc](https://stackoverflow.com/questions/2428296/jquery-ajax-upload-file-in-asp-net-mvc) — Liam, Aug 14 '17 at 14:05

score 76 · Answer 1 · answered Apr 30 '14 at 10:26

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

    }
}

Amazing work - I've tried for months to get this to work. Many thanks! — David Christopher Reynolds, Jul 30 '15 at 15:39
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? — Shadi Alnamrouti, Jan 03 '16 at 16:22
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" }); — RiaanDP, Jan 21 '16 at 13:43
Man, wish I came across this earlier! Best'est answer on Internet! — Hajjat, Oct 05 '16 at 04:41

score -2 · Answer 2 · answered Dec 06 '13 at 10:05

-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 06 '13 at 10:05

Marthijn

3,292
2
31
48

score -4 · Answer 3 · edited Jul 14 '15 at 06:21

-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 '15 at 06:21

Qiu

5,651
10
49
56

answered Jul 14 '15 at 06:05

samir

9

File upload using MVC 4 with Ajax

3 Answers3

Linked

Related