JQuery Ajax文件上传完成后触发整页重载问题求助

看起来你遇到的问题是大文件上传时页面会整页刷新，但小文件或纯数据请求正常，而且代码在其他项目能正常运行，当前是ASP.NET MVC环境。结合你的代码和场景，我整理了几个最可能的原因和解决方案：

1. 阻止表单默认提交行为（最常见原因） #

你的Save函数大概率是绑定在表单的提交按钮上（比如按钮是type="submit"），或者直接关联了表单的submit事件。当上传大文件时，Ajax请求耗时较长，浏览器可能会触发表单的默认提交行为，导致页面重载。

修复方式： #

• 修改按钮类型：把提交按钮的type从submit改成button，避免触发表单提交：

  <button type="button" onclick="Save()">保存文件</button>
  

• 在事件中阻止默认行为：如果是通过事件绑定调用Save，在事件处理函数里添加阻止代码：

  $("form").submit(function(event) {
      event.preventDefault(); // 阻止表单默认提交
      Save();
      return false;
  });
  

• 在Save函数末尾返回false：确保函数执行后不会触发默认行为：

  function Save() {
      // ... 你的现有代码 ...
      var response = CallServiceUpload(resp);
      response.done(function (responseData, textStatus) {
          var controlInput = $("#file1");
          controlInput.replaceWith(controlInput = controlInput.val('').clone(true));
      });
      return false; // 新增：阻止默认提交
  }
  

2. 调整ASP.NET的大文件请求限制 #

ASP.NET默认对请求大小有严格限制，大文件上传时可能超过阈值，导致服务器返回错误，进而触发浏览器页面刷新。

修改web.config配置： #

在web.config中添加/修改以下节点，扩大请求大小限制（示例设置为1GB，可根据需求调整）：

<!-- 在<system.web>节点下设置（单位：KB） -->
<system.web>
    <httpRuntime targetFramework="4.7.2" maxRequestLength="1048576" />
</system.web>

<!-- 在<system.webServer>节点下设置（单位：Bytes） -->
<system.webServer>
    <security>
        <requestFiltering>
            <requestLimits maxAllowedContentLength="1073741824" />
        </requestFiltering>
    </security>
</system.webServer>

注意：maxRequestLength和maxAllowedContentLength的单位要对应，前者是KB，后者是Bytes。

3. 完善Ajax错误处理 #

当前的错误处理只是简单alert，如果大文件上传时出现网络中断或服务器异常，可能导致页面行为异常。可以增强错误处理，同时显式设置异步请求：

修改CallServiceUpload函数： #

this.CallServiceUpload = function (obj) {
    return $.ajax({
        type: "POST",
        url: "api/" + obj.service,
        data: obj.sender,
        contentType: false,
        processData: false,
        async: true, // 显式声明异步（jQuery默认是true，但明确设置更稳妥）
        error: function (xhr, textStatus, errorThrown) {
            console.error("上传失败详情:", textStatus, errorThrown, xhr.responseText);
            alert("上传出错：" + xhr.responseText);
            return false; // 阻止后续可能的默认行为
        }
    });
}

4. 排查后端大文件处理异常 #

虽然你的后端代码在其他项目正常，但当前环境可能存在文件权限、磁盘空间不足等问题，导致大文件上传时抛出异常。建议在后端catch块中添加详细日志，确认是否有错误：

修改后端SaveFile的catch块： #

catch (Exception ex) {
    // 记录完整异常信息到日志（可以用Trace、NLog等工具）
    System.Diagnostics.Trace.WriteLine($"大文件上传异常：{ex.ToString()}");
    var error = new { 
        error = ex.Message,
        detail = ex.InnerException?.Message ?? "无内部异常",
        stackTrace = ex.StackTrace
    };
    return JObject.FromObject(error);
}

按照这个顺序排查，一般先解决表单默认提交的问题，大部分情况下就能解决页面重载的现象。

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