JavaScript获取input上传文件名称的3种方法

在前端开发中，经常需要处理文件上传功能。有时我们只需要获取用户选择文件的名称而不需要立即上传文件内容。本文将介绍3种在JavaScript中获取input上传文件名称的方法。

方法一：使用File API

document.getElementById('fileInput').addEventListener('change', function(e) {
  const fileName = e.target.files[0].name;
  console.log('文件名:', fileName);
});

这是最常用的方法，通过File API获取文件对象，然后访问其name属性。

方法二：使用value属性

document.getElementById('fileInput').addEventListener('change', function() {
  const fullPath = this.value;
  const fileName = fullPath.split('\\').pop().split('/').pop();
  console.log('文件名:', fileName);
});

这种方法通过解析input的value值来获取文件名，适用于不支持File API的旧浏览器。

方法三：使用URL API

document.getElementById('fileInput').addEventListener('change', function(e) {
  const file = e.target.files[0];
  const fileName = new URL(`file://${file.name}`).pathname.split('/').pop();
  console.log('文件名:', fileName);
});

这种方法结合了URL API，可以更安全地处理文件名。

注意事项

• 确保在change事件中获取文件名
• 处理多文件上传时，需要遍历files数组
• 考虑浏览器兼容性问题
• 文件名可能包含路径信息，需要正确处理

以上三种方法都可以有效获取input上传文件的名称，开发者可以根据项目需求和浏览器兼容性要求选择合适的方法。