javascript 获取 input type="file" 文件名

从 <input type="file"> 元素获取文件路径时，通常会得到类似 "C:akepathDoc3.doc" 的完整路径，但我们往往只需要文件名。以下方法可以实现：

方法一：字符串截取

利用 substring() 方法和 lastIndexOf() 方法，从路径中提取文件名：

<code class="javascript">let str = e.target.value;
let filename = str.substring(str.lastIndexOf('\') + 1);
console.log(filename); // 输出：Doc3.doc</code>

代码解释：

立即学习“Java免费学习笔记（深入）”；

• e.target.value 获取 <input> 元素的值（文件路径）。
• lastIndexOf('\') 查找最后一个反斜杠的位置。
• + 1 跳过反斜杠，从文件名开始截取。

此方法兼容性好，适用于大多数浏览器，包括 IE。

方法二：正则表达式

使用正则表达式更灵活地提取文件名：

<code class="javascript">let str = e.target.value;
let regex = /(.*\)?(.*)/;
let result = str.match(regex);
let filename = result[2];
console.log(filename); // 输出：Doc3.doc</code>

代码解释：

立即学习“Java免费学习笔记（深入）”；

• /(.*\)?(.*)/ 这是一个正则表达式：
  • (.*\)? 匹配可选的路径部分（包括结尾的反斜杠），? 表示可选匹配。
  • (.*) 匹配文件名。
• str.match(regex) 使用正则表达式匹配字符串。
• result[2] 获取匹配结果中的文件名（第二个捕获组）。

此方法也具有良好的浏览器兼容性。

选择哪种方法取决于个人偏好和项目需求。 字符串截取方法更简洁，而正则表达式方法更具可扩展性，适用于更复杂的路径处理。