javascript - 当我尝试使用 js knockout 在 asp .net mvc5 中上传图像时，HttpPostedFileBase null？

Question

我正在尝试使用 Knockout js 在 asp .net mvc 5 中上传图像，并且 HttpPostedFileBase 类型的 paraFrame PhotoFile 为空，并且我无法上传图像，我是新使用 Knockout js 我希望有人能帮助我，

这是模型，

    public int LenderId { get; set; }
    public string GenderId { get; set; }
    public string GenderName { get; set; }
    public string Email { get; set; }
    public bool IsActive { get; set; }
    public string PhotoPath { get; set; }
    public HttpPostedFileBase PhotoFile { get; set; }

这是 html，

        <div class="form-group">
            <span class="control-label col-md-2"><strong>Foto:</strong></span>
            <div class="col-md-10">
                <span class="btn btn-default btn-file">
                    <input type="file" class="form-control" id="PhotoUpload" name="PhotoUpload" data-bind="attr:{src: PhotoPath}" />
                </span>
            </div>
        </div>

这是js

函数lenderModel() { var lenderModel = this;

lenderModel.LenderId = ko.observable();
lenderModel.FirstName = ko.observable();
lenderModel.MiddleName = ko.observable();
lenderModel.FirstLastName = ko.observable();
lenderModel.SecondLastName = ko.observable();
lenderModel.IdentificationCard = ko.observable();
lenderModel.GenderId = ko.observable();
lenderModel.GenderName = ko.observable();
lenderModel.Email = ko.observable();
lenderModel.IsActive = ko.observable();
lenderModel.PhotoPath = ko.observable();
lenderModel.CreateBy = ko.observable();
lenderModel.CreationDate = ko.observable();
lenderModel.ModifiedBy = ko.observable();
lenderModel.ModifiedDate = ko.observable();

}

lenderViewModel.Create = function () {
    if (lenderViewModel.IsNew()) {
        $.ajax({
            url: '/AdminLenders/Create',
            data: ko.toJSON(lenderViewModel.LenderModel()),
            dataType: "json",
            type: "POST",
            contentType: "application/json; charset=utf-8",
            async: true,
            success: function (data) {
                if (data.Success) {
                    LoadGenders();
                    LoadListLenders();
                    $('#TextboxFirstName').val('');
                    $('#TextboxMiddleName').val('');
                    $('#TextboxFirstLastName').val('');
                    $('#TextboxSecondLastName').val('');
                    $('#TextboxIdentificationCard').val('');
                    $('#TextboxEmail').val('');
                    $('#ComboBoxGenders').val('');
                    $('#TextboxIsActive').prop('checked', false);
                    swal("Prestamista creado!", "Se ha registrado correctamente!", "success")
                }
                else {
                    swal("Error creando el prestamista!", data.Data, "error")
                }
            },
            error: function (ex) {
                alert('Ocurrión un error');
            }
        });
    }
};

由于我是knockout js的新手，我不知道如何实现它，请帮助感谢贡献和帮助

Answer 1

我猜测了 Controller 上的 Create 方法是什么样子，并使用 FormData 对象想出了这个方法。

lenderViewModel.Create = function () {
    if (lenderViewModel.IsNew()) {
            var lender = lenderViewModel.LenderModel();    

        var lenderData = new FormData();

        // Build up a matching Lender
        lenderData.append("LenderId", lender.LenderId());
        lenderData.append("GenderId", lender.GenderId());
        lenderData.append("GenderName", lender.GenderName());
        lenderData.append("Email", lender.Email());
        lenderData.append("IsActive", lender.IsActive());
        lenderData.append("PhotoPath", lender.PhotoPath());

            // Get the file and add it to the Lender
        var fileUpload = $("#PhotoUpload").get(0);
        var files = fileUpload.files;
        if(files.length === 1) {
             lenderData.append("PhotoFile", files[0]);
                }

        $.ajax({
            url: '/AdminLenders/Create',
            data: lenderData,
            enctype: "multipart/form-data",
            dataType: "json",
            type: "POST",
            contentType: false,
            processData: false,
            success: function (data) {
                if (data.Success) {
                    LoadGenders();
                    LoadListLenders();
                    $('#TextboxFirstName').val('');
                    $('#TextboxMiddleName').val('');
                    $('#TextboxFirstLastName').val('');
                    $('#TextboxSecondLastName').val('');
                    $('#TextboxIdentificationCard').val('');
                    $('#TextboxEmail').val('');
                    $('#ComboBoxGenders').val('');
                    $('#TextboxIsActive').prop('checked', false);
                    swal("Prestamista creado!", "Se ha registrado correctamente!", "success")
                }
                else {
                    swal("Error creando el prestamista!", data.Data, "error")
                }
            },
            error: function (ex) {
                alert('Ocurrión un error');
            }
        });
    }
};