本文探讨使用JavaScript获取HTML文件上传控件文件名的兼容性问题。指出直接截取路径字符串在不同浏览器(如IE、Firefox及Linux系统)下表现不一致,需通过同时查找正斜杠与反斜杠并取最大索引值的方法,准确提取文件名,避免路径解析错误。
JavaScript获取上传文件名兼容方案
使用JavaScript获取上传的文件名,主要目的是提升用户界面的美观度与交互友好性。
然而,网络上常见的通过 path.substring(path.lastIndexOf('/')+1) 这种方式获取文件名的做法并不准确。
在实际工作环境中,这种方法会引发诸多兼容性问题。
例如,在Firefox浏览器中,input表单的value属性默认直接返回文件名;而在IE浏览器中,该属性则显示完整的文件路径。
因此,必须针对不同浏览器进行差异化处理:在Firefox环境下,lastIndexOf('/')的返回值为-1;而在IE环境下,路径分隔符显示为反斜杠\。
在Linux系统及其他浏览器中,获取到的路径通常使用正斜杠/(目前暂未发现Linux下有浏览器返回全路径的情况)。
因此,需要采用双重判断机制来确保兼容性。
具体实现代码如下:
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);
}