如何禁用刷新页面 ajax 调用？

Question

我在我的项目中使用图片上传。当我单击上传按钮并选择一个文件时。我正在使用 html 代码在 ajax 调用中显示图像，但之后我的页面正在刷新，结果是所有表单数据都是空白的。

我也尝试过使用e.preventDefault，但并没有解决问题。

我的 ajax 调用获取图像和拆分。

'.clsDosyalar' 是我的文本框，我在这里写图像名称。

JavaScript

   <script>
              $(document).ready(function () {
                    $("#files").on("change", function (e) {
                        var formData = new FormData();
                        var totalFiles = document.getElementById("files").files.length;
                        for (var i = 0; i < totalFiles; i++) {
                            var file = document.getElementById("files").files[i];
                            alert(file.name);
                            formData.append("files", file);
                        }

             $.ajax({
                type: "POST",
                url: '/haber/upload',
                data: formData,
                dataType: 'json',
                contentType: false,
                processData: false,
                success: function (response) {
                    if (response.Durum == "1") {
                    if (response.Dosyalar != "") {
                        var res = response.Dosyalar.split(",");

                        if ($('.clsDosyalar').val() == "") {
                            $('.clsDosyalar').val(response.Dosyalar);
                        }

                        else {
                            $('.clsDosyalar').val($('.clsDosyalar').val() + "," + response.Dosyalar);
                        }

                        for (var dlist = 0; dlist < res.length; dlist++) {

                            $("<span class=\"pip\" id=\"pip" + res[dlist] + "\">" +
                              "<img class=\"imageThumb\" src=\"" + "../../Uploads/" + res[dlist] + "\" title=\"" + res[dlist] + "\"/>" +
                              "<br/><span class=\"remove\" id=\"" + res[dlist] + "\">Fotoğrafı Sil</span><span class=\"gorunurfoto\" id=\"" + res[dlist] + "\">Görünür Fotoğraf</span>" + res[dlist].filename +
                              "</span>").insertAfter("#files");
                        }

                    }

                },
                error: function (error) {
                    alert("Hata");
                }
            });
        });
    });

        </script>

HTML

@using (Html.BeginForm("Yeni", "Haberler", FormMethod.Post, new { enctype = "multipart/form-data" }))
    {
  <div class="col-lg-9">
    @Html.TextBoxFor(model => model.HaberImage, "", new { @class = "clsDosyalar form-control" })
    </div>
<input type="file" id="files" name="postedFiles" multiple />
 <input type="submit" value="Ekle" class="btn btn-success" id="btnEkle" />
}

控制器

我正在发送选定的图像名称 JsonResult。

 [Route("haber/upload")]
    public JsonResult Upload()
    {
        int Durum = 0;
        string strFileNames = "";
        try
        {
            for (int i = 0; i < Request.Files.Count; i++)
            {
                var file = Request.Files[i];

                var fileName = DateTime.Now.Ticks.ToString() + Path.GetExtension(file.FileName);

                var path = Path.Combine(Server.MapPath("~/Uploads/"), fileName);
                file.SaveAs(path);

                strFileNames += fileName + ",";
            }

            Durum = 1;

        }

        catch
        {
            Durum = 0;
        }

        if (strFileNames != "")
        {
            strFileNames = strFileNames.Substring(0, strFileNames.Length - 1);
        }



        return Json(new { Durum = Durum, Dosyalar = strFileNames });
    }

我的行动结果；

 [HttpGet]
        [Route("panel/haberekle")]
        public ActionResult Yeni()
        {
            return View();
        }

        [HttpPost]
        [Route("panel/haberekle")]
        public ActionResult Yeni(Haberler haberModel)
        {

            Haberler haber = new Haberler();


            haber.HaberImage = haberModel.HaberImage;
            haber.Baslik = haberModel.Baslik;
            haber.Icerik = HttpUtility.HtmlEncode(haberModel.Icerik);
            haber.Tarih = haberModel.Tarih;
            haber.BitisTarihi = haberModel.BitisTarihi;
            haber.AktifMi = haberModel.AktifMi;
            haber.SilindiMi = haberModel.SilindiMi;
            haber.GorunecekImage = haberModel.GorunecekImage;

            using (dbContext = DbContext())
            {
                dbContext.Haberler.Add(haber);
                dbContext.SaveChanges();
            }

            return RedirectToAction("Listele", "Haberler");
        }

解决方案链接；

Refresh in browser when uploading mvc file c #

Answer 1

您可以通过将提交按钮发送到type="button"来手动提交表单

在其点击功能上添加提交操作

$('#myButton').on('click',function(){ 
   $(this).closest('form').submit(); 
});