AngularJS调用Ajax/上传文件后如何避免页面刷新？

嘿，我看你遇到了AngularJS上传文件到WebAPI后页面自动刷新的问题，这事儿我之前也碰到过，大概率是表单的默认提交行为在搞鬼，再加上你的$http配置可能有几个小问题，咱们一步步来解决：

一、先搞清楚为什么会刷新 #

当你用表单上传文件时，哪怕你用了AngularJS的$http发送请求，如果没有阻止表单的默认提交事件，浏览器还是会像处理普通表单那样提交页面，导致刷新。另外你的$http配置里的async: false和不完整的headers也可能是诱因。

二、具体解决步骤 #

1. 阻止表单的默认提交行为 #

如果你是通过表单触发上传，一定要阻止它的默认行为：

• 方法一：在表单的ng-submit指令里返回false

  <form ng-submit="uploadFile(); return false;">
    <!-- 文件输入框和上传按钮 -->
  </form>
  

• 方法二：在上传按钮的ng-click里传入$event，调用preventDefault()

  <button ng-click="uploadFile($event)">上传</button>
  

  然后在控制器里：

  $scope.uploadFile = function(event) {
    event.preventDefault(); // 阻止默认提交行为
    yourFileService.setImage(file, refId, typeId);
  };
  

2. 修正你的Service代码 #

你的$http配置有几个需要调整的地方：

• 去掉async: false：AngularJS的$http本身就是异步的，强制同步不仅不推荐，还可能导致页面阻塞或奇怪行为
• 正确设置headers：对于FormData，不要手动设置Content-Type为multipart/form-data，而是把'Content-Type'设为undefined，这样浏览器会自动添加正确的边界信息
• 补全完整的promise处理

修正后的Service代码：

this.setImage = function(file, refModuleId, moduleTypeId) { 
  var url = urlApiFileStorage + "api/FileStorage/SetImage"; 
  var deferred = $q.defer(); 
  var fd = new FormData(); 
  fd.append('file', file); 
  fd.append('refModuleId', refModuleId); 
  fd.append('moduleType', moduleTypeId); 

  $http({ 
    method: "POST", 
    url: url, 
    data: fd, 
    crossDomain: true, 
    headers: { 
      'cache-control': 'no-cache',
      'Content-Type': undefined // 关键：让浏览器自动处理Content-Type
    },
    transformRequest: angular.identity // 必须：告诉AngularJS不要序列化FormData
  })
  .then(function(response) {
    deferred.resolve(response.data);
  }, function(error) {
    deferred.reject(error);
  });

  return deferred.promise;
};

3. 额外注意点 #

• 确保你的文件输入框没有绑定到普通的表单提交逻辑，比如不要用原生的submit按钮，而是用AngularJS的指令触发上传
• 检查WebAPI端是否正确接收FormData，确保后端接口没有返回会导致页面跳转的响应

三、总结 #

核心就是两个关键点：

• 阻止表单的默认提交行为，避免浏览器触发页面刷新
• 正确配置AngularJS的$http请求，适配FormData的上传需求

这样调整后，上传文件后页面就不会自动刷新啦！

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