Загрузка файла с использованием всплывающей формы, MVC и AJAX всегда 'NULL'

Question

Я использую код из этого учебного пособия для загрузки строк в SQL серверную таблицу, и одним из новых требований является получение файлов, хранящихся на сервере для целей "Доказательства", поэтому в У меня есть следующий код:

@using (Html.BeginForm("AnadirLic", "Licencia", FormMethod.Post, new { enctype = "multipart/form-data", onsubmit = "return SubmitForm(this)" }))
{
    @Html.HiddenFor(model => model.idLicencia)
<div class="form-group">
                    <label>Tipo de especialista: </label>

                    @Html.DropDownList("tipoEspecialista", new List<SelectListItem>{
                    new SelectListItem{ Value="1", Text = "Medico"},
                    new SelectListItem{ Value="2", Text = "Dentista"},
                    new SelectListItem{ Value="3", Text = "Matrona"},})

                    <small class="form-text text-muted">Ejercicio</small>
                </div>
                <div class="form-group">
                    <label>Cargar Evidencia</label>
                    @*@Html.TextBoxFor(model => model.rutaEvidencia, new { @class = "form-control", @type = "file" })*@
                    @*@Html.TextBoxFor(model => model.rutaEvidencia, new { @class = "form-control", @type = "file", enctype = "multipart/form-data" })*@
                    <input type="file" id="FileUpload" />
                    <small class="form-text text-muted">Máximo 4MB, .pdf, .jpg, .png</small>
                </div>

                <div class="input-group">
                    <input type="submit" value="Subir" class="btn btn-primary" style="margin-right:10px"/>
                    <input type="reset" value="Limpiar campos" class="btn btn-primary" />
                </div>

И функция AJAX выглядит следующим образом:

<script>
function PopupForm(url) {
            var formDiv = $('<div/>');
            $.get(url)
                .done(function (response) {
                    formDiv.html(response);

                    Popup = formDiv.dialog({
                        autoOpen: true,
                        resizable: true,
                        title: 'Llenar nuevo reposo',
                        height: 500,
                        width: 1300,
                        close: function () {
                            Popup.dialog('destroy').remove();
                        }

                    })
                }
                    )
        }

        function SubmitForm(form) {
            $.validator.unobtrusive.parse(form);
// FILE VALIDATOR / COUNT
            var totalFiles = document.getElementById("FileUpload").files.length;
            for (var i = 0; i < totalFiles; i++) {
                var archivo = document.getElementById("FileUpload").files[i];
                form.append("FileUpload", archivo);
            }
//IF VALID UPLOAD TO SQL
            if ($(form).valid()) {
                $.ajax({
                    type: "POST",
                    url: form.action,
                    data: $(form).serialize(),
                    success: function (data) {
                        if (data.success) {
                            Popup.dialog('close');

                            $('#tablaLicencia').DataTable().ajax.reload()

                            $.notify(data.message, {
                                globalPosition: "top center",
                                className: "success"
                            })

                        }
                    }
                });
            }
            return false;
        }

</script>

Наконец, C#:

[HttpPost]
public ActionResult AnadirLic(licenciasUsuario lic)
{
    using (TH_mantenedorLicenciasEntities db = new TH_mantenedorLicenciasEntities())
    {
        var fechaYMD = DateTime.Now.ToString("yyyyMMdd");
        var fechaHM = DateTime.Now.ToString("hhmm");
        var InputFileName = "";
        var ServerSavePath = "";

        for (int i = 0; i < Request.Files.Count; i++)
        {
            var archivo = Request.Files[i];

            InputFileName = Path.GetFileName(archivo.FileName);
            ServerSavePath = Path.Combine(Server.MapPath("~/evCargadas") + fechaYMD + "_" + fechaHM + "_" + InputFileName);
            //Save file to server folder  
            archivo.SaveAs(ServerSavePath);
        }

        ViewBag.Message = "Archivo subido correctamente.";

        db.licenciasUsuario.Add(lic);

        db.SaveChanges();

        //UPDATE CON RUTA DE ARCHIVO
        lic.rutaEvidencia = ServerSavePath;

        db.Entry(lic).State = System.Data.Entity.EntityState.Modified;

        db.SaveChanges();

        return Json(new { success = true, message = "Licencia guardada exitosamente." }, JsonRequestBehavior.AllowGet);
    }
}

Я столкнулся с тем, что FileUpload всегда равен нулю, а использование HttpPostFileBase возвращает то же самое поэтому метод генерирует пустое исключение для сущности и, основываясь на некоторых ответах по SO, MVC конфликтует с такого рода ajax приложениями.

System.Data.Entity.Validation.DbEntityValidationException: 'Validation failed for one or more entities. See 'EntityValidationErrors' property for more details.'

Возможно ли эмулировать функцию, которая позволяет / принудительно загрузить файл в папку проекта, используя ту же самую всплывающую вещь?

Answer 1

<input type="file" id="FileUpload" /> позволяет выбрать один файл. В функции отправки вы получаете доступ к свойству files, которое доступно только для выбора нескольких файлов.

Итак, либо добавьте несколько к вашему входному тегу <input type="file" id="FileUpload" multiple />

или измените функцию отправки, чтобы использовать свойство value вместо свойства files.

function SubmitForm(form) {
    $.validator.unobtrusive.parse(form);
// FILE VALIDATOR / COUNT
    /*var totalFiles = document.getElementById("FileUpload").files.length;
    for (var i = 0; i < totalFiles; i++) {
        var archivo = document.getElementById("FileUpload").files[i];
        form.append("FileUpload", archivo);
    }*/
    var archivo = document.getElementById("FileUpload").Value;
    form.append("FileUpload", archivo);
//IF VALID UPLOAD TO SQL
    if ($(form).valid()) {
        $.ajax({
            type: "POST",
            url: form.action,
            data: $(form).serialize(),
            success: function (data) {
                if (data.success) {
                    Popup.dialog('close');

                    $('#tablaLicencia').DataTable().ajax.reload()

                    $.notify(data.message, {
                        globalPosition: "top center",
                        className: "success"
                    })

                }
            }
        });
    }
    return false;
}