我想将 javascript 中的数据和文件发送到控制器（但如何）（Mvc asp.net）答案

【问题标题】：I want send data and file in javascript to controller (but how)(Mvc asp.net)我想将 javascript 中的数据和文件发送到控制器（但如何）（Mvc asp.net）
【发布时间】：2018-09-01 11:42:32
【问题描述】：

我有一个这样的脚本，我还想向控制器发送照片但是当我添加发送文件部分时，我无法将文件发送到控制器。有什么办法可以同时发布文件和数据？

这是我的代码：

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

-----脚本-----------

    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>

【问题讨论】：

标签： javascript asp.net file post model-view-controller

【解决方案1】：

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

【讨论】：

首先感谢您的回答，但我无法将此答案适应我的代码我是 javascript 新手，所以什么是 fsid wid 以及 applyToJobAPI 的工作原理以及此 js 返回的类型？
非常感谢，但在这段代码中它给出了一个错误对象对象，所以我稍微更改了您的代码，再次感谢您

【解决方案2】：

这对我有用

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

我也用了上面的代码

【讨论】：