asp.net mvc Ajax submit form with fileinput in jquery plugin

Question

I'm having problems with an form.

I need to submit a form with ajax with fileinput in the form. In this form, I use the plugin with fileinput. This is the website

Here is my code:

<link href="~/Content/Plugin/bootstrap-fileinput-master/css/fileinput.min.css" rel="stylesheet" />
<script src="~/Content/Plugin/bootstrap-fileinput-master/js/fileinput.min.js"></script>
<script src="~/Content/Plugin/bootstrap-fileinput-master/js/fileinput_locale_zh.js"></script>

    @using (Ajax.BeginForm(null, null, new AjaxOptions(){
            HttpMethod = "post",Url = Url.Action("Upload", "WorkItem"),
                InsertionMode = InsertionMode.Replace, LoadingElementDuration = 2000,
                OnSuccess = "completed" },
                new { role = "form", enctype = "multipart/form-data" }))
        {
        <div class="input-group">
            <span class="input-group-addon" id="basic-addon1">TITLE</span>
            <input type="text" name="Descr" class="form-control" aria-describedby="basic-addon1">
        </div>
        <div class="m-b-5"></div>

        <div class="input-group">
            <span class="input-group-addon" id="basic-addon1">POINT</span>
            <input type="text" name="Point" class="form-control" aria-describedby="basic-addon1">
        </div>
        <div class="m-b-5"></div>
        <div class="input-group">
            <span class="input-group-addon" id="basic-addon1">DESCR</span>
            <input type="text" name="Descr" class="form-control" aria-describedby="basic-addon1">
        </div>
        <div class="m-b-5"></div>
        <input id="file-0a" name="file" class="file" type="file" data-min-file-count="1">
        <br />
        <button type="submit" class="btn btn-primary">Submit</button>
        <button type="reset" class="btn btn-default">Reset</button>
    }

When I click the submit button, no file can be accepted. What is going wrong?

Answer 1

As @Stepher Muecke told @Ajax.BeginForm can not be used to post Files. I dont have a idea about plugin.I use the following method:

    $("#btnUploadExcel").click(function () {

            if ($("#newuploadexcel").val() == '') {
                notie.alert(2, "Please Select Any File", 2);
            }
            else {

                if (window.FormData!= undefined) {

                    var fileUpload = $("#newuploadexcel").get(0);
                    var files = fileUpload.files;

                    // Create FormData object
                    var fileData = new FormData();

                    // Looping over all files and add it to FormData object
                    for (var i = 0; i < files.length; i++) {
                        fileData.append(files[i].name, files[i]);
                    }

                    // Adding one more key to FormData object
                    //      fileData.append('contentId', contentId); commented as now supplierId is passed in the excel itself

                    $.ajax({
                        url: '/BulkStock/UploadExcel',
                        data: fileData,
                        type: "POST",
                        async: true,
                        dataType: 'json',
                        contentType: false,
                        processData: false,
                        success: function (result) {

                            var data = result.message;
                            //1=Failure, No excel
                            //2= Failue, with excel
                            //3=success, no excel

                            if (result.errmsg == '3') {
                                notie.alert(1, data, 6);
                            }
                            else if (result.errmsg == '1') {
                                notie.alert(3, data, 6);
                            }
                            else {
                                window.location = result.link;
                                notie.alert(3, data, 10);
                            }

                        },
                        error: function (response) {

                            console.log(response.responseText);
                        },
                        failure: function (response) {
                            console.log(response.responseText);
                        }
                    });

                    $("#newUpload").modal('hide');

                } else {
                    notie.alert(3, "FormData is not supported.", 3);
                }
            }
        });

And my controller to get file is:

    public JsonResult UploadExcel()
        {
            string filePath = String.Empty;
            string fileName = string.Empty;
            if (Request.Files.Count > 0)
            {
                    //  Get all files from Request object  
                    HttpFileCollectionBase files = Request.Files;

                    for (int i = 0; i < files.Count; i++)
                    {
                        HttpPostedFileBase file = files[i];
                        fileName = file.FileName;
                        string extension = System.IO.Path.GetExtension(fileName);
                        if (extension.Equals(".xls") || extension.Equals(".xlsx"))
                        {
                            var now = DateTime.Now.Ticks.ToString(CultureInfo.InvariantCulture);
                            string my3DigitRandomNumber = now.Substring(now.Length - 7, 3);
                            fileName = (file.FileName.Replace(extension, "")) + (my3DigitRandomNumber + extension);
                            filePath = string.Format("{0}/{1}", Server.MapPath("~/excelfiles"), fileName);
                            file.SaveAs(filePath);
                          }
                    }
              }
    }
Create a folder with the name "excelfiles" in your solution