How to append whole set of model to formdata and obtain it in MVC

If your view is based on a model and you have generated the controls inside <form> tags, then you can serialize the model to FormData using

var formdata = new FormData($('form').get(0));

This will also include any files generated with <input type="file" name="myImage" .../>

and post it back using

$.ajax({  url: '@Url.Action("YourActionName", "YourControllerName")',  type: 'POST',  data: formdata,  processData: false,  contentType: false,         });

and in your controller

[HttpPost]public ActionResult YourActionName(YourModelType model){}

or (if your model does not include a property for HttpPostedFileBase)

[HttpPost]public ActionResult YourActionName(YourModelType model, HttpPostedFileBase myImage){}

If you want to add additional information that is not in the form, then you can append it using

formdata.append('someProperty', 'SomeValue');

If you want to send Form data using Ajax.This is the way to send

var formData = new FormData();//File Upload   var totalFiles = document.getElementById("Iupload").files.length;for (var i = 0; i < totalFiles; i++) {    var file = document.getElementById("Iupload").files[i];    formData.append("Document", file);}formData.append("NameCode", $('#SelecterID').val());formData.append("AirLineCode", $('#SelecterID').val());$.ajax({        url: "/Controller/ActionName",        type: "POST",        dataType: "JSON",        data: formData,        contentType: false,        processData: false,        success: function (result) {    }})

Using Pure Javascript, considering you have

<form id="FileUploadForm">   <input id="textInput" type="text" />  <input id="fileInput" type="file" name="fileInput" multiple>  <input type="submit" value="Upload file" /></form>

JS

document.getElementById('FileUploadForm').onsubmit = function () {var formdata = new FormData(); //FormData objectvar fileInput = document.getElementById('fileInput');//Iterating through each files selected in fileInputfor (i = 0; i < fileInput.files.length; i++) {    //Appending each file to FormData object    formdata.append(fileInput.files[i].name, fileInput.files[i]);}//text valueformdata.append("textvalue",document.getElementById("textInput").value);//Creating an XMLHttpRequest and sendingvar xhr = new XMLHttpRequest();xhr.open('POST', '/Home/UploadFiles');xhr.send(formdata); // sexhr.onreadystatechange = function () {    if (xhr.readyState == 4 && xhr.status == 200) {        //on success alert response        alert(xhr.responseText);    }  }  return false;}  

in your C# controller you can get values it as below

[HttpPost]public ActionResult UploadFiles(YourModelType model, HttpPostedFileBase fileInput){      //save data in db}

Reference : File Uploading using jQuery Ajax or Javascript in MVC