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" />

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

1 个答案: