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] 获取匹配结果中的文件名（第二个捕获组）。此方法也具有良好的浏览器兼容性。
选择哪种方法取决于个人偏好和项目需求。 字符串截取方法更简洁，而正则表达式方法更具可扩展性，适用于更复杂的路径处理。
以上就是JavaScript中如何从input type="file"获取文件名？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
398
收藏
