Pass (Send) multiple file along with form data to Controller using jQuery Ajax in ASP.Net MVC

Last Reply 4 days ago By dharmendr

Posted 4 days ago

Hi,

I have one textbox and file control 

after clicking of save button only textbox value is coming to controller

I need to get files also along with text

Could you please help me 

@model kendoreport.Models.category

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>   
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
    <script>
        function Save() {
            $.post("/validations/Upload", $("#Dtls").serialize(), function (data) {
             
            })
            }
    </script>
</head>
<body>
    <form id="Dtls">
       
            <table>
                
                <tr>
                    <td>Title</td>                  
                    <td>@Html.TextBoxFor(m => m.Name)</td>                                   
                </tr>
               
                <tr>
                    <td>Select File</td>
                    <td><input type="file" name="postedFile" multiple="multiple" /></td>
                </tr>
            </table>
            <hr />
            <input type="button" value="Upload"  onclick="Save()"/>s        
    </form>
</body>
</html>

 

public ActionResult Upload(category cat)
{
    string path = Server.MapPath("~/Uploads/");
    if (!Directory.Exists(path))
    {
        Directory.CreateDirectory(path);
    }
    postedFile.SaveAs(path + Path.GetFileName(postedFile.FileName));
}

 

You are viewing reply posted by: dharmendr 4 days ago.
Posted 4 days ago

Hi mahesh213,

Refer below sample. Use FormData to send the values to controller.

Controller

public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public JsonResult Upload()
    {
        if (Request.Files.Count > 0)
        {
            string name = Request.Form["name"];
            for (int i = 0; i < Request.Files.Count; i++)
            {
                HttpPostedFileBase postedFile = Request.Files[i];
                string fileName = Path.GetFileName(postedFile.FileName);

                string path = Server.MapPath("~/Uploads/");
                if (!Directory.Exists(path))
                {
                    Directory.CreateDirectory(path);
                }
                postedFile.SaveAs(path + fileName);
            }
        }
        return Json("Data saved successfully.");
    }
}

View

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btnUpload").click(function () {
                var formData = new FormData();
                formData.append('name', $("#txtName").val());
                var files = $("#fuUpload").get(0).files;
                for (var i = 0; i < files.length; i++) {
                    formData.append(files[i].name, files[i]);
                }
                $.ajax({
                    url: "/Home/Upload",
                    type: 'POST',
                    cache: false,
                    contentType: false,
                    processData: false,
                    data: formData,
                    success: function (response) {
                        alert(response);
                    }
                });
            });
        });
    </script>
</head>
<body>
    <form id="Dtls">
        <table>
            <tr>
                <td>Title</td>
                <td><input type="text" id="txtName" name="txtName" /></td>
            </tr>
            <tr>
                <td>Select File</td>
                <td><input id="fuUpload" type="file" name="postedFile" multiple="multiple" /></td>
            </tr>
        </table>
        <hr />
        <input type="button" id="btnUpload" value="Upload" />
    </form>
</body>
</html>

Screenshot

Data in Controller