Как исправить нулевой HttpPostedFileBase при передаче FormData в вызов AJAX

Question

У меня есть вызов AJAX, который передает данные вместе с файлом в ViewModel и вызывает контроллер:

function fncInsTrainingLog()
{
    var trainingtitle = getValOf("trainingTitle");
    var ImageFile = $('#imageUploadForm')[0].files[0];

    var sdata = {
        TrainingTitle :trainingtitle,
        ImageFile : ImageFile
    }

    $.ajax({
        url: "/Capability/InsTrainingLog",
        type: "POST",
        data: JSON.stringify(sdata),
        contentType: "application/json",
        dataType: "json",
        success: function () {
            location.reload();
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert("A problem has been encountered. Please contact the web administrator.");
        }
    });
} 

Вот мой контроллер:

[HttpPost]
public JsonResult InsTrainingLog(TrainingModel trainingModel)
{

    // Psuedo code to save file to drive
    // get file from TrainingModel 
    // save(file)

    string sp = "usp_InsTrainingLog";

    object[] param =
    {
        "@TrainingTitle", trainingModel.TrainingTitle
    };

    dbHelper.ExecuteProcedureNonQuery(sp, param);
    var result = param;

    return Json(result, JsonRequestBehavior.AllowGet);
}

ViewModel:

   public sealed class TrainingModel
    {
        public HttpPostedFileBase ImageFile { get; set; }
        public string TrainingTitle { get; set; }

    }

ImageFile в TrainingModel возвращает ноль, но TrainingTitle в порядке.Почему ViewModel не может прочитать файл из вызова AJAX?

Как передать файл в ViewModel и сохранить изображение на моем ПК?

Answer 1

Вам необходимо использовать вызов AJAX с FormData(), изменить contentType на contentType: false и добавить processData: false.

Я воспроизвел, и это сработало

var trainingtitle = $("#trainingTitle").val();
                var ImageFile = $('#imageUploadForm')[0].files[0];

                var formData = new FormData();
                formData.append('TrainingTitle', trainingtitle);
                formData.append('ImageFile', ImageFile);


                $.ajax({
                    url: "/Product/InsTrainingLog",
                    type: "POST",
                    data: formData,
                    contentType: false,
                    processData: false,
                    dataType: "json",
                    success: function () {
                        location.reload();
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert("A problem has been encountered. Please contact the web administrator.");
                    }
                });



Updated cshtml


    <div id="uploadForm">
                    <input type="text" name="TrainingTitle" id="trainingTitle" />
                    <input type="file" name="ImageFile" id="imageUploadForm" />
                    <button type="button" onclick="fncInsTrainingLog()">Submit</button>
                </div>

    function fncInsTrainingLog() {
                var trainingtitle = $("#trainingTitle").val();
                var ImageFile = $('#imageUploadForm')[0].files[0];

                var formData = new FormData();
                formData.append('TrainingTitle', trainingtitle);
                formData.append('ImageFile', ImageFile);
                //var sdata = {
                //    TrainingTitle: trainingtitle,
                //    ImageFile: ImageFile
                //}

                $.ajax({
                    url: "/Product/InsTrainingLog",
                    type: "POST",
                    data: formData,
                    contentType: false,
                    processData: false,
                    dataType: "json",
                    success: function () {
                        location.reload();
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert("A problem has been encountered. Please contact the web administrator.");
                    }
                });
            }

Answer 2

Я бы использовал $ .ajaxForm () ...

@using (Html.BeginForm())
{
    <div id="status"></div>

    <input type="text" name="TrainingTitle" />
    <input type="file" name="ImageFile" accept="image/*" />
    <input type="submit" value="Upload File to Server" />
}


<script>
    (function () {
       var status = $('#status');
        $('form').ajaxForm({
            complete: function (xhr) {
                    status.html(xhr.responseText);
                }
            }
        });
    })();
</script>

Код не проверен!