iOS 11.3下无文件数据的$.ajax提交纯文本表单异常缓慢问题咨询

我之前也踩过iOS 11.3更新后，Safari处理空文件字段的multipart请求时的诡异延迟坑，给你几个实测有效的解决方案：

方案1：动态切换表单编码类型 #

当没有文件需要上传时，不用强制用multipart/form-data，改用默认的表单编码类型，这样能直接避开Safari的异常处理逻辑：

$('#chatform').submit(function(e) {
  e.preventDefault();
  const fileInput = $('#pic')[0];
  const hasSelectedFile = fileInput.files.length > 0;
  let requestData;
  let ajaxOpts = {
    url: '你的接口地址',
    type: 'POST',
    success: function(res) {
      // 处理成功回调
    },
    error: function(xhr) {
      // 处理错误回调
    }
  };

  if (hasSelectedFile) {
    // 有文件时用FormData和multipart编码
    requestData = new FormData(this);
    ajaxOpts.processData = false;
    ajaxOpts.contentType = false;
  } else {
    // 无文件时用普通表单序列化
    requestData = $(this).serialize();
    ajaxOpts.contentType = 'application/x-www-form-urlencoded';
  }

  ajaxOpts.data = requestData;
  $.ajax(ajaxOpts);
});

方案2：给空文件字段添加占位Blob #

如果你的业务必须保持multipart/form-data编码，可以给未选择文件的字段添加一个空的Blob对象，让Safari能正常构造请求体：

$('#chatform').submit(function(e) {
  e.preventDefault();
  const formData = new FormData(this);
  const fileInput = $('#pic')[0];

  // 当没有选择文件时，追加一个空Blob占位
  if (fileInput.files.length === 0) {
    formData.append('pic', new Blob(), '');
  }

  $.ajax({
    url: '你的接口地址',
    type: 'POST',
    data: formData,
    processData: false,
    contentType: false,
    success: function(res) {
      // 处理成功逻辑
    },
    error: function(xhr) {
      // 处理错误逻辑
    }
  });
});

补充说明 #

这个问题是iOS 11.3之后Safari的一个特定bug，当表单声明为multipart/form-data但没有实际文件数据时，浏览器在构造请求体时会出现阻塞延迟。上面两个方案都能绕过这个问题，方案1更高效，方案2适合必须保持multipart编码的场景。

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