Safari 11.1：未选文件时ajax/XHR表单提交失败（已在Webkit r230963修复）

嘿，我刚好碰到过这个问题，这是Safari特定版本里的一个坑，以下是详细情况和解决信息：

问题详情 #

• 触发场景：在macOS/iOS Safari 11.1及更新版本、Safari Technology Preview 11.2中，当表单内的input[type=file]字段未选择任何文件（且该字段并非表单必填项）时，调用$.ajax发起请求会直接失败；但只要该字段选择了文件，请求就能正常发送。
• 错误表现：ajax的error回调会被触发，Safari控制台会显示截断的错误信息：Failed to load resource: The operation c...

修复情况 #

这个问题已经在Webkit的构建版本r230963中被官方修复了，后续推送更新的Safari版本都会包含这个修复，升级到对应版本后就不会再遇到这个问题。

临时兼容方案（针对未修复的旧版本） #

如果你需要兼容还没包含该修复的Safari版本，可以在发起请求前手动移除未选择文件的input[type=file]字段，避免它干扰请求：

// 获取表单元素和对应的FileInput
const form = document.getElementById('your-form-id');
const fileInput = form.querySelector('input[type=file]');
const formData = new FormData(form);

// 如果没有选择文件，从FormData中删除该字段
if (fileInput.files.length === 0) {
  formData.delete(fileInput.name);
}

// 发起Ajax请求
$.ajax({
  url: '/your-api-endpoint',
  method: 'POST',
  data: formData,
  processData: false,
  contentType: false,
  success: (res) => {
    // 处理成功逻辑
  },
  error: (xhr, status, err) => {
    // 处理错误逻辑
  }
});

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