Question

我有一个类似的脚本，我也想将照片发送给控制器但是添加发送文件部分时，无法将文件发送到控制器。有什么办法可以同时发布带有数据的文件？

这是我的代码：

$(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>

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

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

我还使用了代码

我想将JavaScript中的数据和文件发送到控制器（但是如何发送）（MVC ASP.NET）

2 个答案: