如何判断用户选中后待上传的文件是否被修改

上传前预校验方案（推荐） #

你不需要调用额外的系统API获取文件最新修改时间，Chrome浏览器的文件输入控件绑定的File对象会自动同步本地文件的最新属性，你只需要在用户选中文件时记录原始的文件元数据，上传前做对比即可：

第一步：选中文件时存储原始元数据 #

// 存储文件选中时的原始元数据
const originFileMeta = {};
$('#yourFileInput').on('change', function() {
  const selectedFile = this.files[0];
  if (!selectedFile) return;
  originFileMeta.lastModified = selectedFile.lastModified;
  originFileMeta.size = selectedFile.size;
  originFileMeta.name = selectedFile.name;
});

第二步：发起ajax请求前执行校验 #

function isFileUnchanged() {
  const currentFile = $('#yourFileInput')[0].files[0];
  if (!currentFile) return false;
  // 同时对比修改时间和文件大小，降低误判概率
  return currentFile.lastModified === originFileMeta.lastModified 
    && currentFile.size === originFileMeta.size;
}

// 上传逻辑示例
$('#uploadBtn').on('click', function() {
  if (!isFileUnchanged()) {
    alert('文件已被修改，请重新选择后上传');
    return;
  }
  // 校验通过，继续构造formData发起ajax请求
  const formData = new FormData();
  formData.append('file', $('#yourFileInput')[0].files[0]);
  // 后续ajax请求逻辑...
})

注意：不要尝试从已经构造好的FormData中提取文件对比属性，FormData中存储的是你append时的文件快照，不会实时更新，必须从文件输入控件的files属性中取最新的文件对象

更精准的错误兜底方案 #

如果遇到极端场景预校验没有拦截到，你可以在ajax的错误回调中精准识别net::ERR_UPLOAD_FILE_CHANGED错误，比单纯判断状态码0更准确：

$.ajax({
  url: '/your/upload/api',
  type: 'POST',
  data: formData,
  processData: false,
  contentType: false,
  success: res => {
    // 上传成功逻辑
  },
  error: (xhr, status, errorThrown) => {
    // 专门匹配文件被修改的错误
    if (errorThrown.includes('ERR_UPLOAD_FILE_CHANGED')) {
      alert('文件已被修改，请重新选择后上传');
      $('#yourFileInput').val(''); // 重置文件选择框
    } else if (xhr.status === 0) {
      alert('网络异常，请检查网络连接或跨域配置');
    } else {
      alert(`上传失败，错误码：${xhr.status}`);
    }
  }
})

可选替代方案（仅适合小文件场景） #

如果你的业务场景都是小于10M的小文件，可以在用户选中文件时直接把文件内容读取到内存中，上传时直接使用内存中的二进制流，完全规避源文件修改导致的上传失败问题：

let fileBuffer = null;
$('#yourFileInput').on('change', async function() {
  const file = this.files[0];
  if (!file) return;
  // 读取文件内容到内存
  fileBuffer = await file.arrayBuffer();
})
// 上传时直接用内存中的buffer构造文件对象
const uploadFile = new File([fileBuffer], originFileMeta.name, {
  lastModified: originFileMeta.lastModified
});
formData.append('file', uploadFile);

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