巧妙提取input元素中的文件名

网页开发中，文件上传功能经常需要获取用户选择的文件名。然而，浏览器返回的文件名通常包含完整路径，例如 "C:akepathDoc3.doc"，这并非我们所需。 本文介绍两种方法，帮助您轻松提取纯文件名。

方法一：字符串截取

利用JavaScript的substring()方法，我们可以根据反斜杠分割字符串，提取最后一段作为文件名：

let filePath = e.target.value;
let fileName = filePath.substring(filePath.lastIndexOf('\') + 1);
console.log(fileName); // 输出: Doc3.doc

方法二：正则表达式匹配

更优雅的方法是使用正则表达式：

let filePath = e.target.value;
let fileName = filePath.match(/[^\/]+$/);
console.log(fileName[0]); // 输出: Doc3.doc

此正则表达式/[^\/]+$/匹配字符串结尾处，最后一个/或之前的部分。

浏览器兼容性提示:

需要注意的是，反斜杠在不同浏览器中的处理方式可能略有差异。 在某些浏览器（例如IE）中，可能需要使用\\来表示反斜杠。 为了提高代码的兼容性，建议在处理前对路径进行规范化处理，例如将所有反斜杠替换为正斜杠。

通过以上两种方法，您可以有效地从input元素中提取纯文件名，避免完整路径的干扰，从而提升代码的健壮性和可读性。