JavaScript获取上传文件名的跨浏览器兼容方案

作者:竹影

时间:2026-10-28

浏览:230

本文探讨使用JavaScript获取HTML文件上传控件文件名的兼容性问题。指出直接截取路径字符串在不同浏览器(如IE、Firefox及Linux系统)下表现不一致,需通过同时查找正斜杠与反斜杠并取最大索引值的方法,准确提取文件名,避免路径解析错误。

文章目录

JavaScript获取上传文件名兼容方案

使用JavaScript获取上传的文件名,主要目的是提升用户界面的美观度与交互友好性。



然而,网络上常见的通过 path.substring(path.lastIndexOf('/')+1) 这种方式获取文件名的做法并不准确。



在实际工作环境中,这种方法会引发诸多兼容性问题。


例如,在Firefox浏览器中,input表单的value属性默认直接返回文件名;而在IE浏览器中,该属性则显示完整的文件路径。



因此,必须针对不同浏览器进行差异化处理:在Firefox环境下,lastIndexOf('/')的返回值为-1;而在IE环境下,路径分隔符显示为反斜杠\。


在Linux系统及其他浏览器中,获取到的路径通常使用正斜杠/(目前暂未发现Linux下有浏览器返回全路径的情况)。


JavaScript获取上传文件名兼容方案 

因此,需要采用双重判断机制来确保兼容性。


具体实现代码如下:

 
function getFileName(path){
var pos1 = path.lastIndexOf('/');
var pos2 = path.lastIndexOf('\\');
var pos = Math.max(pos1, pos2)
if( pos<0 )
return path;
else
return path.substring(pos+1);
} 

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章