如何防止输入类型文件接受更改功能的某些输入答案

【问题标题】：how to prevent input type file from accepting some inputs on change function如何防止输入类型文件接受更改功能的某些输入
【发布时间】：2019-07-09 13:36:01
【问题描述】：

我正在做一个项目，我需要用户只上传 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" />

【问题讨论】：

是什么阻止我将我的 pdf 重命名为 txt 文件并上传它？扩展不是正确的方法。
对于用户的反馈很好。当然需要服务器测试。请参阅我的答案以获得即时反馈的客户端验证。

标签： javascript python jquery html django

【解决方案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" />

【讨论】：