JavaScript上传文件名校验实现：仅允许最多11位纯数字命名文件

你需要额外补充一个隐藏的文件选择input来触发系统文件选择弹窗，完整实现代码如下：

HTML部分 #

<!-- 原有上传按钮 -->
<button type="button" onclick="upload()" value="upload"  id="buttonUpload">Upload</button>
<!-- 新增隐藏的文件选择框 -->
<input type="file" id="fileInput" style="display: none;" />

JavaScript部分 #

const fileInput = document.getElementById('fileInput');
// 绑定文件选择后的校验逻辑
fileInput.addEventListener('change', handleFileSelect);

// 点击上传按钮触发文件选择
function upload() {
  fileInput.click();
}

// 文件选择后的校验逻辑
function handleFileSelect(e) {
  const selectedFile = e.target.files[0];
  if (!selectedFile) return;

  // 拆分文件名主名和后缀
  const lastDotPosition = selectedFile.name.lastIndexOf('.');
  let mainName, suffix;
  if (lastDotPosition === -1) {
    mainName = selectedFile.name;
    suffix = '';
  } else {
    mainName = selectedFile.name.slice(0, lastDotPosition);
    suffix = selectedFile.name.slice(lastDotPosition);
  }

  // 匹配规则：主名仅允许1-11位阿拉伯数字
  const validateReg = /^\d{1,11}$/;
  if (!validateReg.test(mainName)) {
    alert('文件名不符合要求：主名仅允许1-11位阿拉伯数字，不能包含字母、特殊字符、空格');
    // 清空选择记录，避免同一个文件重复选择不触发事件
    fileInput.value = '';
    return;
  }

  // 校验通过，此处写入你的实际上传逻辑即可
  console.log('文件校验通过，可上传：', selectedFile);
}

规则说明 #

• 核心校验正则/^\d{1,11}$/用^和$限定整个主名必须完全匹配规则，\d对应0-9阿拉伯数字，{1,11}限制长度范围，自动排除字母、特殊字符、空格的情况。
• 拆分文件名时取最后一个.的位置切分，避免文件名包含多个.时校验出错。
• 若需要额外限制文件后缀，可在校验逻辑中补充对suffix的判断，比如仅允许png格式可添加if (suffix.toLowerCase() !== '.png') { 提示后缀不合法 }。

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