Можно ли отфильтровать диалог открытия файла, который вызывается из поля входного файла html по определенному имени файла?

Question

Поскольку мои пользователи должны выбрать файл из папки с большим количеством файлов, я бы хотел добавить фильтр в диалог открытия файла, который вызывается из поля входного файла. Я понимаю, что поле <input type="file"> позволяет фильтровать по расширениям файлов следующим образом:

<input accept=".txt" type="file" />

Но возможно ли установить фильтр для определенного имени файла?

В приложении winform на C # я просто установил бы свойство Filter для openFileDialog на Foo|bar.txt, и оно показывало бы только bar.txt файлы.

Answer 1

Я не думаю, что в HTML есть какой-либо атрибут, но вы можете сделать это с помощью javascript.

Я создал базовый пример. Здесь я принимаю только имя файла, скажем specific-filename. Вы можете установить его в соответствии с вашими потребностями.

let file = document.getElementById('file');
file.addEventListener('change', (e)=> {
  const fullPath = e.target.value;
  const filename = fullPath.replace(/^.*[\\\/]/, '').split('.')[0];
  console.log(filename); //the name of your file
  if(filename!=='specific-filename') {
    e.target.value='';  // this resets the value of input field
  }
});

<div class="container">
  <input type="file" id="file">
</div>

Если у вас есть форма, вы можете сделать это аналогичным образом во время отправки формы и запретить ее отправку, если имя файла не совпадает. Здесь я перехватил процесс onchange поля ввода

Надеюсь, это поможет!