How to Pass Image File and Some Data From Ajax to MVC Controller
<p>I have a partial view to display image upload button and a list of photos as follows:  </p>

<pre><code>&lt;input type="file" id="FileUpload" multiple /&gt;
&lt;input type="submit" id="Upload" value="Upload" /&gt;

&lt;table class="table"&gt;

&lt;!-- A table goes here to view the images from a table in the database using @foreach as below where Model is a list of images obtained from the database: --&gt;

@foreach (var item in Model) {
    &lt;tr&gt;
        &lt;td&gt;
            @Html.DisplayFor(modelItem =&gt; item.cover)
        &lt;/td&gt;
        &lt;td&gt;
            @Html.Image("/Images/" + item.id_product + "/" + item.id_product + ".jpg", "Image", "50")
            @Html.DisplayFor(modelItem =&gt; item.Product.type)
        &lt;/td&gt;
    &lt;/tr&gt;
}
&lt;/table&gt;


&lt;script&gt;
    $(document).ready(function () {
        $("#Upload").click(function () {
            var formData = new FormData();
            var totalFiles = document.getElementById("FileUpload").files.length;
            for (var i = 0; i &lt; totalFiles; i++)
            {
                var file = document.getElementById("FileUpload").files[i];

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

&lt;/script&gt;
</code></pre>

<p>My controller action that is supposed to receive the uploaded file is as follows: </p>

<pre><code>[HttpPost]
        public void Upload()
        {
            for (int i = 0; i &lt; Request.Files.Count; i++)
            {
                var file = Request.Files[i];
                var fileName = Path.GetFileName(file.FileName);
                var path = Server.MapPath("~/Images/");
                if(this.CreateFolderIfNeeded(path))
                    file.SaveAs(path + fileName);
            }
        }
</code></pre>

<p>And in the main view I have the following: </p>

<pre><code>@Ajax.ActionLink("All", "All", "Products", new { id = Model.id_product }, new AjaxOptions()
       {
           HttpMethod = "GET",
           UpdateTargetId = "divImages",
           InsertionMode = InsertionMode.Replace
       })
                &lt;div id="divImages"&gt;&lt;/div&gt;
</code></pre>

<p>And the <code>all(int id)</code> method above is used to return a partial view with a list of images from the database. </p>

<p>Now, I have the following requirement: </p>

<p>After the user click on the upload button, I want to pass a parameter (<code>@Model.Take(1).Single().id_product</code>) to the <code>ActionMethod</code> <code>Upload()</code> in the controller to save the path (which is named according to <code>@Model.Take(1).Single().id_product</code>) of the uploaded image in the database. </p>

<p>Also I want after the image is uploaded successfully, I want to refresh the partial view (table) automatically to view the newly uploaded image. </p>

<p>I hope someone can help. </p>