I want send data and file in javascript to controller (but how)(Mvc asp.net)

Question

I have a script like that I also want to send a photo to controller but when I add send file part, I can't send the file to controller. Is there any way to post file with data in the same time?

Here is my code:

$(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");
            }

--Controller---

   <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

This work for me

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);
                    }

i also used the code on up

Answer 2

.serialize() does not include the file type data. It only returns the query string whch c an be passed as get. instead Use FormData to construct the data Here is an example from one of my repos

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);
            }
        });