js获取<input type='file'>的文件名和后缀名

 

 代码如下：

<form method="post" onsubmit="return checksubmit()">
    <input type="file" id="uploadfile">
    <input type="submit" name="Submit" value="提交">
</form>
<script >
    function checksubmit(){
        event.preventDefault();
        var file = document.getElementById("uploadfile");
        var filePath = file.value;    //js中无法获取文件的真是路径
        var fileName = filePath.substring(filePath.lastIndexOf('\\')+1); //文件名
        var extName = fileName.substring(fileName.lastIndexOf('.')+1);    //后缀名
        console.log('文件名:'+fileName);
        console.log('后缀名:'+extName);
    }
</script>

//获取后缀名也可以这样
//var extName = fileName.split('.')[1];

 注：

截取字符串也可使用substr();

 

substr 和 substring 的区别：

当只有一个参数时，两者都是返回从index位置到结尾的字符串

console.log('吃饭睡觉打豆豆'.substr(2));
console.log('吃饭睡觉打豆豆'.substring(2));
//输出结果都是睡觉打豆豆

当有两个参数时就不同了

substr(start,length);     //返回从start位置开始length长度的子串
substring(start,end);    //返回从start位置开始到end位置的子串（不包含end）

console.log('吃饭睡觉打豆豆'.substr(2,2));　　//输出 睡觉
console.log('吃饭睡觉打豆豆'.substring(2,2));　　//输出 空字符串
console.log('吃饭睡觉打豆豆'.substring(2,4));　　//输出睡觉