Я хочу отправить данные и файл в JavaScript на контроллер (но как) (Mvc asp.net)

Question

У меня есть такой скрипт, я тоже хочу отправить фото на контроллер но когда я добавляю часть отправки файла, я не могу отправить файл на контроллер. Есть ли способ одновременно разместить файл с данными?

Вот мой код:

$(document).ready(function () {
                $("#btnBecKaydet").click(function () {
                    var formBeceri = $("#FormumBec").serialize();
                    $.ajax({
                        type: "POST",
                        url: "/Cv/BeceriEkle",
                        data: formBeceri,
                        success: function () {
                            $("#ModelimBec").modal("hide");
                        }
                    });
                });
            });

----- Script -----------

    public ActionResult BeceriEkle(kisiselWeb.Models.tbl_beceri s1 , HttpPostedFileBase file)
            {
                if(file != null)
                {
                    if (System.IO.File.Exists(Server.MapPath(s1.beceriFoto)))
                    {
                        System.IO.File.Delete(Server.MapPath(s1.beceriFoto));
                    }
                    WebImage img = new WebImage(file.InputStream);
                    FileInfo fotoinfo = new FileInfo(file.FileName);
                    string newfoto = Guid.NewGuid().ToString() + fotoinfo.Extension;
                    img.Resize(75, 75);
                    img.Save("~/Foto/Beceri/" + newfoto);
                    s1.beceriFoto = "/Foto/Beceri/" + newfoto;
                }
                db.tbl_beceri.Add(s1);
                db.SaveChanges();
                return RedirectToAction("Cv", "Beceri");
            }

- контроллер ---

   <div class="modal-body">
                    <div class="container">
                        <form id="FormumBec">
                            <div class="col-md-12 align-content-center">
                                @Html.Label("Beceri Başlığı : ", htmlAttributes: new { @class = "control-label col-md-6" })
                                <input type="text" name="beceriBaslik" /><br />
                                @Html.Label("Beceri Fotoğrafı : ", htmlAttributes: new { @class = "control-label col-md-12" })
                                <input type="file" id="BecFot" accept=".jpg,.png,.JPEG,.jpeg" /><br />
                            </div>
                        </form>
                    </div>
                </div>

Answer 1

Эта работа для меня

var formElement = $('#FormumBec');
                var formData = new FormData(); 
                var files = $("#file").get(0).files;
                if (files.length > 0) {
                    formData.append("file", files[0]);
                }
                $.ajax({
                    //Only file is to be sent via POST
                    type: "POST",
                    url: "/Cv/BeceriEkle" + "?" + formElement.serialize(),
                    contentType: false,
                    processData: false,
                    data: formData,
                    success: function (data) {
                        $("#ModelimBec").modal("hide");
                        alert(formData);
                    },
                    error: function (err) {
                        console.log("Form submit failed with : " + err);
                        alert(err);
                    }

Я также использовал код на

Answer 2

.serialize () не включает данные типа файла. Он возвращает только строку запроса, которая может быть передана как get. вместо Используйте FormData для построения данных Вот пример из одного из моих репо

var formElement = $('#FormumBec');
        var form = document.forms.namedItem(fid);
        var formData = new FormData(form);
        $.ajax({
            //Only file is to be sent via POST
            type: "POST",
            url: "/Cv/BeceriEkle"+ "?" + formElement.serialize(),
            contentType: false,
            processData: false,
            data: formData,
            success: function(data) {
                $("#ModelimBec").modal("hide");
            },
            error: function(err) {
                console.log("Form submit failed with : " + err);
                alert(err);
            }
        });