MVC中使用Dropzone.js上传文件时如何避免页面回发？

你遇到的核心问题是提交按钮触发了表单的默认提交行为，导致页面回发；另外你手动写AJAX的方式也可以优化，贴合Dropzone的设计逻辑，彻底避免页面刷新。下面一步步给你解决：

1. 修复页面回发的根本原因 #

你的提交按钮点击时没有阻止浏览器的默认表单提交行为，这是回发的主要诱因。同时form标签的action属性也可能在某些场景下触发默认提交，建议先调整：

修改HTML代码 #

去掉form的action属性，避免默认提交路径干扰：

<form class="dropzone" id="dzCampaingImages" method="post" enctype="multipart/form-data">
    <div class="fallback">
        <input id="inputCampaingImages" name="file" type="file" multiple />
    </div>
</form>
<!-- 假设你的提交按钮结构如下 -->
<button id="btnUploadSubmit">开始上传</button>

修改JavaScript代码 #

在按钮点击事件中必须阻止默认行为，同时优化上传逻辑，这里提供两种方案：

方案一：优化你现有的AJAX手动上传方式

Dropzone.options.dzCampaingImages = {
    autoProcessQueue: false, // 禁止Dropzone自动触发上传
    uploadMultiple: true,
    init: function () {
        var submitButton = document.querySelector("#btnUploadSubmit");
        var myDropzone = this;

        submitButton.addEventListener("click", function (event) {
            // 关键：阻止按钮的默认提交行为，彻底避免页面回发
            event.preventDefault();
            event.stopPropagation();

            // 构建FormData，注意统一文件参数名方便后端接收
            var data = new FormData();
            for (var i = 0; i < myDropzone.files.length; i++) {
                data.append("uploadFiles", myDropzone.files[i]);
            }

            $.ajax({
                url: '@Url.Content("~/Promotion/UploadImages")',
                type: "POST",
                processData: false,
                contentType: false,
                data: data,
                success: function (response) {
                    console.log("上传成功：", response);
                    // 上传完成后清空Dropzone队列
                    myDropzone.removeAllFiles();
                },
                error: function (er) {
                    alert("上传失败：" + er.responseText);
                }
            });
        });
    }
};

方案二：用Dropzone自带的上传方法（更推荐）

Dropzone本身已经封装了无刷新AJAX上传逻辑，不需要手动写$.ajax，代码更简洁不易出错：

Dropzone.options.dzCampaingImages = {
    autoProcessQueue: false, // 禁止自动上传
    uploadMultiple: true,
    url: '@Url.Content("~/Promotion/UploadImages")', // 直接指定上传接口地址
    init: function () {
        var submitButton = document.querySelector("#btnUploadSubmit");
        var myDropzone = this;

        submitButton.addEventListener("click", function (event) {
            event.preventDefault();
            event.stopPropagation();
            // 触发Dropzone的队列上传，自带无刷新效果
            myDropzone.processQueue();
        });

        // 批量上传成功的回调
        this.on("successmultiple", function(files, response) {
            console.log("批量上传完成", response);
            myDropzone.removeAllFiles();
        });

        // 批量上传失败的回调
        this.on("errormultiple", function(files, response) {
            alert("上传失败：" + response);
        });
    }
};

2. 优化后端C#代码 #

你的后端代码当前是void返回类型，建议改为JsonResult，让前端能正确接收响应，同时简化文件处理逻辑：

[HttpPost]
public JsonResult UploadImages()
{
    try
    {
        var uploadPath = Server.MapPath(ConfigurationManager.AppSettings["PathTemp_CampaingImages"]);
        // 确保上传目录存在，避免报错
        if (!Directory.Exists(uploadPath))
        {
            Directory.CreateDirectory(uploadPath);
        }

        var uploadedFileNames = new List<string>();
        for (int i = 0; i < Request.Files.Count; i++)
        {
            var file = Request.Files[i];
            if (file != null && file.ContentLength > 0)
            {
                // 验证允许的文件类型
                var allowedExts = new[] { ".gif", ".jpg", ".jpeg", ".png" };
                var fileExt = Path.GetExtension(file.FileName).ToLower();
                if (allowedExts.Contains(fileExt))
                {
                    var fileName = Path.GetFileName(file.FileName);
                    var saveFullPath = Path.Combine(uploadPath, fileName);
                    file.SaveAs(saveFullPath);
                    uploadedFileNames.Add(fileName);
                }
            }
        }

        return Json(new { Success = true, Message = "上传成功", UploadedFiles = uploadedFileNames });
    }
    catch (Exception ex)
    {
        return Json(new { Success = false, Message = $"上传失败：{ex.Message}" });
    }
}

关键注意事项 #

• 必须阻止按钮默认事件：event.preventDefault()和event.stopPropagation()是避免页面回发的核心，一定要加。
• 避免form标签的action与自定义上传逻辑冲突，要么去掉action，要么额外阻止表单的submit事件。
• 如果使用Dropzone自带的processQueue()，务必配置url属性，让Dropzone知道上传接口地址。

内容的提问来源于stack exchange，提问作者Medero