javascript 判断文件名

上传文件的时候，我们通常是使用form表单的 file标签 ；<input type = "file" name = "upload" id = "upload" value = "Brower" />

linux系统下面我们不用考虑文件的名称是否包含特殊字符： \ / ? * < > | : " 等，然而在windows 下面就需要考虑这些特殊字符了。

下面讲解如何用正则表达式判断 是否包含这些特殊字符：
function checkFile（）{
var fileContent= jQuery("#upload").val();
var fileNamepatn = /\||<|>|\?|\*|:|\/|\\|"/;
if(fileNamepatn.test(fileContent) ){
alert("不能包含特殊字符");
}
}在火狐测试这段代码是可以判断文件名的。然而在chrome 下面无法判断。我们上传正常的文件也会被指定为包含特殊字符。

我们会发现 在火狐下面 fileContent 就仅仅是一个文件名，然而在chrome 下面会多出一些路径：C:\XXX\XXX.png

: 和\ 都是特殊字符 因此不能通过判断。我们通常会使用substring（）和lastIndexOf()  方法截取字符串 获得 XXX.png ，修改后的代码

function checkFile（）{
var fileContent= jQuery("#upload").val();
fileContent = fileContent.substring(fileContent .lastIndexOf("\"));
var fileNamepatn = /\||<|>|\?|\*|:|\/|\\|"/;
if(fileNamepatn.test(fileContent) ){
alert("不能包含特殊字符");
}
}

上面的代码会有问题的，因为"\" 在JavaScript 中是一个特殊字符，我们就会想到转义，然而转义之后会发现 fileContent .lastIndexOf(\\') 返回的是 -1.

我们想到的就是用正则表达式去替换 “\”

function checkFile（）{
var fileContent= jQuery("#upload").val();
fileContent  = fileContent.repalce(/\\/,"\");
fileContent = fileContent.substring(fileContent .lastIndexOf("\"));
var fileNamepatn = /\||<|>|\?|\*|:|\/|\\|"/;
if(fileNamepatn.test(fileContent) ){
alert("不能包含特殊字符");
}
}

这个方法看似可以，却发现 C:\XXX\XXX.png 仅仅是第一个 \ 被替换成了 “/”;很痛苦，就想到用replaceAll（） 方法，结果是没有这个方法，更痛苦了，，百度了一把： fileContent.repalce(/\\/g,"\"); 添加一个g表示全局替换。

最终代码如下：

function checkFile（）{
var fileContent= jQuery("#upload").val();
fileContent  = fileContent.repalce(/\\/g,"\");
fileContent = fileContent.substring(fileContent .lastIndexOf("\"));
var fileNamepatn = /\||<|>|\?|\*|:|\/|\\|"/;
if(fileNamepatn.test(fileContent) ){
alert("不能包含特殊字符");
}
}