根据单选按钮选择限制上传文件类型的HTML实现问题排查

问题原因 #

• 类名选择器范围错误：你给单选按钮和文件上传控件都加了selectfileclass类，导致文件上传触发change事件时也会执行修改accept属性的逻辑，引发规则错乱
• 多格式后缀拼接逻辑错误：选中A按钮时，取值为csv,txt，直接拼接.只会得到.csv,txt，不符合accept属性要求的.csv,.txt多后缀格式
• 缺少主动文件格式校验：accept属性仅为浏览器端的可选过滤规则，用户仍可通过选择「所有文件」绕过限制，必须额外增加上传前的格式校验逻辑

修正后的完整代码 #

<div class="form-group">
  <label class="col col-md-2 control-label">
    <span class="widget-icon">
      <i class="fa fa-file txt-color-black"></i>
    </span>
    Type of File
  </label>
  <div class="col-md-2">
    <label class="radio-inline">
      <input type="radio" class="selectfileclass" name="file" id="file_a" value="csv,txt" checked/>
      File_A<br />
    </label>
    <label class="radio-inline">
      <input type="radio" class="selectfileclass" name="file" id="config" value="config"/>
      Config<br />
    </label>
    <br><br>
  </div>
</div>
</form>

<span class="btn">
  <!-- 移除了selectfileclass类，避免触发错误逻辑 -->
  <input type="file" id="ImportFile" accept=".csv,.txt" data-bind="event: { change: $root.Browse }"/>
</span>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// 仅绑定单选按钮的切换事件，修改accept属性
$('input[type=radio].selectfileclass').change(function() {
  const suffixList = $(this).val().split(',');
  const acceptStr = suffixList.map(item => '.' + item).join(',');
  $('#ImportFile').attr("accept", acceptStr);
})

// 添加上传前格式校验，防止用户绕过accept限制
$('#ImportFile').change(function(e) {
  const file = e.target.files[0];
  if (!file) return;
  const allowedSuffix = $('input[name=file]:checked').val().split(',');
  const fileSuffix = file.name.split('.').pop().toLowerCase();
  if (!allowedSuffix.includes(fileSuffix)) {
    alert(`仅允许上传${allowedSuffix.join('、')}格式的文件`);
    $(this).val('');
    return;
  }
  // 原有业务逻辑可在此处继续执行
})
</script>

修改说明 #

• 缩小了事件绑定范围：仅给单选按钮绑定切换修改accept属性的逻辑，避免文件上传操作触发错误的规则修改
• 修复了多后缀拼接逻辑：将单选按钮返回的多后缀值拆分后逐个拼接.，符合accept属性的标准格式要求
• 新增了强制格式校验：无论用户是否绕过浏览器的accept过滤，都会在选完文件后校验后缀，不符合要求直接抛出提示并清空已选文件

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