巧妙提取input元素中的文件名
网页开发中，文件上传功能经常需要获取用户选择的文件名。然而，浏览器返回的文件名通常包含完整路径，例如 "C: akepathDoc3.doc"，这并非我们所需。 本文介绍两种方法，帮助您轻松提取纯文件名。
方法一：字符串截取
利用JavaScript的substring()方法，我们可以根据反斜杠分割字符串，提取最后一段作为文件名：
<code class="javascript">let filePath = e.target.value;
let fileName = filePath.substring(filePath.lastIndexOf('\') + 1);
console.log(fileName); // 输出: Doc3.doc</code>方法二：正则表达式匹配
更优雅的方法是使用正则表达式：
<code class="javascript">let filePath = e.target.value; let fileName = filePath.match(/[^\/]+$/); console.log(fileName[0]); // 输出: Doc3.doc</code>
此正则表达式/[^\/]+$/匹配字符串结尾处，最后一个/或之前的部分。
浏览器兼容性提示:
需要注意的是，反斜杠在不同浏览器中的处理方式可能略有差异。 在某些浏览器（例如IE）中，可能需要使用\\来表示反斜杠。 为了提高代码的兼容性，建议在处理前对路径进行规范化处理，例如将所有反斜杠替换为正斜杠。
通过以上两种方法，您可以有效地从input元素中提取纯文件名，避免完整路径的干扰，从而提升代码的健壮性和可读性。
以上就是如何通过input元素获取纯文件名而不是完整路径？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
259
收藏
