使用jQuery实现文件上传提交时显示加载动画及解决下载无提示问题

我帮你梳理下代码里的两个核心问题，以及对应的解决办法：

1. 加载动画不显示的原因 #

你的AJAX success 回调里直接写了 $('#loader').hide()，这行代码会立即执行（而不是等请求成功后执行），相当于刚显示加载动画就立刻隐藏了，所以你看不到它。

另外要确保你的#loader初始状态是隐藏的，需要给它加CSS样式：

#loader {
  display: none;
}

2. 文件下载不触发的原因 #

普通AJAX请求无法直接触发浏览器的文件下载提示，因为浏览器不会自动处理文件流类型的响应。你需要手动处理服务器返回的文件数据。

完整修复后的代码 #

修正后的JavaScript #

$("#fileform").submit(function(e) {
  e.preventDefault();
  // 显示加载动画
  $('#loader').show();

  var formData = new FormData();
  var fileInput = $('input[type=file]')[0];
  // 先判断是否选择了文件
  if (!fileInput.files.length) {
    alert("请先选择文件！");
    $('#loader').hide();
    return;
  }
  formData.append('file', fileInput.files[0]);
  
  var action = $('#fileform').attr('action');
  
  jQuery.ajax({
    type: 'POST',
    url: action,
    data: formData,
    processData: false,
    contentType: false,
    // 关键：告诉jQuery我们要接收二进制文件流
    responseType: 'blob',
    success: function(blob) {
      // 处理文件下载
      var a = document.createElement('a');
      var url = window.URL.createObjectURL(blob);
      // 这里可以设置下载的文件名，也可以从响应头获取服务器返回的文件名
      var filename = 'processed_file.txt';
      a.href = url;
      a.download = filename;
      document.body.appendChild(a);
      a.click();
      window.URL.revokeObjectURL(url);
      document.body.removeChild(a);
    },
    error: function() {
      alert("文件处理失败，请重试！");
    },
    // 无论成功还是失败，最后都隐藏加载动画
    complete: function() {
      $('#loader').hide();
    }
  });
});

额外优化点 #

如果你的服务器返回了文件名（通常在响应头Content-Disposition里，比如attachment; filename="xxx.txt"），你可以从响应头里解析出真实文件名，替换上面的filename变量：

success: function(blob, status, xhr) {
  var contentDisposition = xhr.getResponseHeader('Content-Disposition');
  var filename = 'processed_file.txt';
  if (contentDisposition) {
    var matches = contentDisposition.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/);
    if (matches != null && matches[1]) {
      filename = matches[1].replace(/['"]/g, '');
    }
  }
  // 后续下载逻辑不变...
}

同时要确保服务器返回的响应头Content-Type设置正确（比如text/plain或对应文件的MIME类型），并且Content-Disposition包含attachment，这样浏览器才能正确识别为可下载文件。

内容的提问来源于stack exchange，提问作者Fede E.