JavaScript - 从输入 type=file 获取文件名和扩展名

在使用 JavaScript 开发时，有时我们需要从用户上传的文件中获取文件名和扩展名。本文将介绍如何使用 JavaScript 从 input 标签的 type=file 中获取文件信息，并提取出文件名和扩展名。

HTML

首先，我们需要在 HTML 文件中创建一个 input 标签，并将其类型设为 file。这样用户在网页上点击该 input 标签时，就可以选择并上传文件。

<input type="file" id="fileInput">

JavaScript

然后，我们需要在 JavaScript 中处理用户选择的文件。我们需要添加一个事件监听器，当用户选中文件后，触发相应的函数来获取文件名和扩展名。

const fileInput = document.getElementById('fileInput');

fileInput.addEventListener('change', () => {
  const file = fileInput.files[0];
  const fileName = file.name;
  const fileExtension = fileName.split('.').pop();

  console.log('文件名:', fileName);
  console.log('扩展名:', fileExtension);
});

上述代码首先通过 document.getElementById 方法获取 id 为 fileInput 的元素。随后，我们给该元素添加一个 change 事件的监听器。当用户选择文件后，该回调函数会被触发。

在回调函数中，我们使用 fileInput.files[0] 来获取用户选择的文件。files 是一个数组，我们选择第一个元素即可。然后，通过 file.name 属性获取文件名。

文件名可能包含扩展名，我们可以使用 split('.') 方法将文件名按照 . 分割成一个数组，然后通过 pop() 方法获取数组的最后一个元素，即文件的扩展名。

最后，我们可以使用 console.log 输出文件名和扩展名。

结论

使用上述代码，我们可以通过 JavaScript 从用户选择的文件中获取文件名和扩展名。这对于需要对上传的文件进行进一步处理的网页应用程序非常有用。

请注意，上述代码只能获取用户选择的文件的文件名和扩展名，并没有实际上传文件到服务器的功能。如果需要上传文件，请再添加相应的代码逻辑。

希望本文能够帮助你在 JavaScript 中获取文件名和扩展名，并对你的开发工作有所启发。