前端限制文件上传仅支持PDF？解决hover显示错误文件问题

我看了你的代码，问题主要出在两个地方：没有清空文件输入框的自身值，还有事件绑定的语法错误，另外重复绑定事件也可能导致异常。咱们一步步来修复：

问题分析 #

1. 事件绑定语法错误：你的$("input[type='file']"). elem.on是无效的jQuery语法，不需要重新选择input元素，直接用传入的elem绑定事件就行。
2. 未清空input的value：当检测到非PDF文件时，你只重置了兄弟标签的文本，但文件输入框本身还保留着选中的错误文件路径，所以鼠标悬停时会显示它。
3. 重复绑定事件：每次点击input都调用changeName绑定change事件，会导致同一个input被绑定多次change事件，触发多次逻辑。

修正后的代码 #

JavaScript部分 #

// 页面加载完成后绑定事件，避免重复绑定
$(document).ready(function() {
  $("input[type='file'].upload-button").on("change", function() {
    const elem = $(this);
    const fileName = elem.val().split("\\").pop();
    const fileExtension = elem.val().split(".").pop().toLowerCase(); // 转小写，兼容大写PDF后缀
    
    if (fileExtension === "pdf") {
      elem.siblings(".Syllabus").text(fileName);
    } else {
      // 关键：清空input的value
      elem.val('');
      elem.siblings(".Syllabus").text('...');
      alert('Only PDF files are accepted');
    }
  });
});

HTML部分 #

去掉onClick绑定，因为我们已经在页面加载时统一绑定了事件：

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

额外优化点 #

• 加上.toLowerCase()：避免用户上传大写后缀的.PDF文件被误判，增强兼容性。
• 使用$(document).ready()：确保DOM加载完成后再绑定事件，避免找不到元素的问题。
• 移除onClick事件：防止重复绑定change事件，导致多次触发逻辑。

这样修改后，当用户选择非PDF文件时，不仅会弹出提示、重置标签文本，还会清空文件输入框的value，鼠标悬停时就不会再显示错误文件了。

内容的提问来源于stack exchange，提问作者abdullateef najem