File-upload saves empty file
<p>I am writing file uploading module in c# using ajax&amp;jQuery on ASP.NET MVC 5</p>

<p>I tried msdn example for backend code</p>

<pre><code>    [HttpPost]
    public ActionResult Upload()
    {
        if (Request.Files.Count != 0)
        {
            for (int i = 0; i &lt; 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);
            }
        }

        return new EmptyResult();
    }
</code></pre>

<p>The problem is that this method creates empty file (size 0 bytes). I guess this happens because we don't read input stream, we're only reading filename on the example.</p>

<p>How to make this work?</p>

<p><strong>Update 1 (posted js code):</strong></p>

<pre><code>&lt;script type="text/javascript"&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: '/Home/Upload',
                data: formData,
                dataType: 'json',
                contentType: false,
                processData: false,
                //beforeSend: beforeSendHandler,
                success: function(){
                    alert("CAT");
                },
                //error: errorHandler,
                // Form data
                data: formData,
                //Options to tell jQuery not to process data or worry about content-type.
                cache: false,
                contentType: false,
                processData: false
            });
            ajaxRequest.done(function () {
                alert("CAAT");
            });
        });
    });

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

<p><strong>Update 2 (added html-markup):</strong></p>

<pre><code>&lt;div class="container body-content"&gt;
        &lt;hr /&gt;
        &lt;input type="file" id="FileUpload" multiple /&gt;
        &lt;input type="button" id="Upload" value="Upload" /&gt;
        &lt;hr /&gt;
        &lt;footer&gt;
       ...
        &lt;/footer&gt;
    &lt;/div&gt;
</code></pre>