как запретить файлу типа ввода принимать некоторые входные данные для функции изменения

Question

Я работаю над проектом, и мне нужно, чтобы пользователь загружал только PDF-файлы.

Я пытаюсь сделать это во внешнем интерфейсе, поэтому всякий раз, когда ввод обнаруживает тип файла, который не является PDF-файлом, он должен отклоняться. Все кажется правильным. Тем не менее, когда я наведите курсор на ввод, он показывает, что загружен не тот файл. Так что мне делать?

function changeName(elem) {
  $("input[type='file']").
  elem.on("change", function() {

    var fileName = elem.val().split("\\").pop();
    var fileExtension = elem.val().split(".").pop();
    if (fileExtension === "pdf") {
      elem.siblings(".Syllabus").text(fileName);

    } else {
      elem.siblings(".Syllabus").val('');
      elem.siblings(".Syllabus").text('...');
      alert('Only PDF files are accepted');
    }

  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="Syllabus fileReset">...</label>
<input type="file" accept="application/pdf" name="file1" onClick="changeName($(this));" required class="upload-button removable" />

Answer 1

Этот код работает лучше, чем вы опубликовали

$("input[type='file']").on("change", function(e) {
  var elem = $(this);
  elem.siblings(".Syllabus").text("...")
  var fileName = elem.val().split("\\").pop();
  var fileExtension = elem.val().split(".").pop();
  
  if (fileExtension !== "pdf") {
    elem.siblings(".Syllabus").text('Only PDF files are accepted')
    elem.replaceWith(elem.val('').clone(true));
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="Syllabus fileReset">...</label>
<input type="file" accept="application/pdf" name="file1" required class="upload-button removable" />