通过ajax发送文件到另一个动作mvc5 c#

Question

I'm trying to send a file via ajax to an action in a controller, i know there is a lot of existing questions about this topic but none of them have solved my problem.

I have a view where the users will upload a file and i'm trying to get that file in the controller but I always get 0 as result of Request.Files.Count();

The action called in the ajax is different from the actual view.

I'm using MVC5 with ASP.NET and C#

Hope you can help me. Thanks!.

My view:

`@using (Html.BeginForm("editProject", "Projects", new { area = "admin" }, 
FormMethod.Post, new { @class = "form-horizontal", role = "form", enctype = 
"multipart/form-data" }))
{
@Html.AntiForgeryToken()
<input type="file" id="inpFile" name="attachment" multiple>
}`

Javascript:

 <script type="text/javascript"> var res = document.getElementById("inpFile"); res.addEventListener("change", function () { files = document.getElementById("inpFile").files; data = new FormData(); data.append(files[0].name, files); $.ajax({ url: "@Url.Action("SaveFile", "Projects",new { area = "admin" })", type: "POST", datatype: "json", data: data, contentType: false, processData: false, success: function (data) { console.log(data.UploadedFileCount + ' file(s) uploaded successfully'); } }); }); </script>

Controller:

public JsonResult SaveFile()
{           
for (int i = 0; i < Request.Files.Count; i++)
{
    var file = Request.Files[i];
    // saving file...
}
return Json(new { UploadedFileCount = Request.Files.Count });
}

UPDATE:

I've solved it.

This line was wrong:

data.append(files[0].name, files);

Should be like this:

data.append(files[0].name, files[0]);

Answer 1

i generate code for your problem and hopefully it will very helpful for you.

Contoller

 public ActionResult Index()
    {
        return View();
    }
    public ActionResult Upload()
    {
        if (Request.Files["ChequeFile"].ContentLength > 0)
        {
            String path = "~/Content/";
            var fileName = Path.GetFileName(Request.Files["ChequeFile"].FileName);
            Random rnd = new Random();
            int rndnumber = rnd.Next(1, 9999999);
            var filepath = Path.Combine(path, rndnumber + "" + fileName);
            if (System.IO.File.Exists(filepath))
            { System.IO.File.Delete(filepath); }
            Request.Files["ChequeFile"].SaveAs(Server.MapPath(filepath));

            return Json("File Successfully Upload via ajax.");
        }
        else
        {
            return Json("File Must Be Required");
        }
    }

View

<div class="jumbotron">
<h1>Upload File via Ajax in MVC5 C#</h1>
    <div id="notification"></div>
    <input type="file" required="required" id="ChequeFile" name="ChequeFile" />
    <br />

    <button type="submit" id="uploadss" class="btn btn-primary">Upload File</button>

Jquery With Ajax Request

@section scripts{
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
    $(document).on('click', "#uploadss", function () {
        debugger;
        var fdata = new FormData();
        $('input[name="ChequeFile"]').each(function (a, b) {
            var fileInput = $('input[name="ChequeFile"]')[a];
            if (fileInput.files.length > 0) {
                var file = fileInput.files[0];
                fdata.append("ChequeFile", file);
            }
        });
        $.ajax({
            //cache: false,
            //async: true,
            type: "POST",
            url: "/Home/Upload",
            data: fdata,
            contentType: false,
            processData: false,
            success: function (data) {
                //debugger;
                $("#notification").html('');
                $("#notification").html(data);
            },
            error: function (data) {
                $("#notification").html('');
                $("#notification").html(data);
            }
        });
    })
</script>
  }

if you need code then please visit my github repostory and find the project