我用 ajax 发布照片的代码不起作用答案

【问题标题】：my code for posting photos with ajax is not working我用 ajax 发布照片的代码不起作用
【发布时间】：2021-10-05 06:49:49
【问题描述】：

我编写的代码在函数中有效，但在按钮单击中无效。帮我。如果我像下面这样写，它会起作用：

 function fotoSecti(inputId) {

    var inp = document.getElementById(inputId);
    var fil = inp.files;
    var formDat = new FormData();

    for (var i = 0; i != fil.length; i++) {
        formDat.append("files", fil[i]);
    }


    $.ajax({
        url: odemeSecenekleriFotoEkle,
        data: formDat,
        processData: false,
        contentType: false,
        type: "POST",
        success: function (response) {...

}

但是如果我在这里写它不起作用：

$("#butonOdemeSecenekleriKaydet").click(function () {
var inp = document.getElementById("odemeSecenekleriInputFoto");
var fil = inp.files;
var formDat = new FormData();

for (var i = 0; i != fil.length; i++) {
    formDat.append("files", fil[i]);
}



$.ajax({
        url: odemeSecenekleriFotoEkle,
        data: formDat,
        processData: false,
        contentType: false,
        type: "POST",
        success: function (response) {...

控制器：

[HttpPost]
        public async Task<IActionResult> odemeSecenekleriKayit(List<IFormFile> files)

当我单击按钮时，我希望数据进入控制器。代码是相同的代码。虽然上述功能有效，但由于某种原因 button.click 也不起作用。

html代码：

<form id="formOdemeSecenekleri" name="form" style="display:none;" method="post" enctype="multipart/form-data">
                <div class="row">
                    <div class="col-md-12">
                        <input onchange="fotoSecti();" class="form-control" type="file" id="odemeSecenekleriInputFoto" style="width:250px;">
                    </div>
                    <div class="col-md-12">
                        <input type="text" class="form-control odemeSecenekleriInput" placeholder="12 Taksit" />
                    </div>
                    <div class="col-md-12 butonDivOdemeSecenekleri">
                        <button id="butonOdemeSecenekleriKaydet" class="btn btn-outline-secondary">Kaydet</button>
                    </div>
                </div>
            </form>

【问题讨论】：

单击按钮时收到的错误信息是什么？
那是什么类型的按钮？
@Musa 没有错误。正如我在问题中所说，数据不会发送到控制器。返回空值。我还添加了问题的html代码。你可以看看
@NitheeshGovind 没有错误。正如我在问题中所说，数据不会发送到控制器。返回空值。我还添加了问题的html代码。你可以看看

标签： javascript c# ajax asp.net-core form-data

【解决方案1】：

您使用的按钮是提交按钮，它提交表单而不是执行 ajax。
在您的按钮事件处理程序中，您必须停止提交表单。您可以通过使用event.preventDefault 阻止按钮的默认操作来做到这一点

$("#butonOdemeSecenekleriKaydet").click(function (event){
    event.preventDefault();

或者您可以使用普通按钮而不是提交按钮

<button type="button" id="butonOdemeSecenekleriKaydet" class="btn btn-outline-secondary">Kaydet</button>

【讨论】：