js判断上传文件后缀名是否合法

我们来详细讲解一下“js判断上传文件后缀名是否合法”的攻略。

1. 获取文件的后缀名

在判断上传文件的后缀名是否合法时，需要先获取到上传的文件的后缀名。可以通过以下代码来获取文件后缀名：

var fileName = "example.jpg"; // 假设上传的文件名为 example.jpg
var fileExtension = fileName.split('.').pop(); // 获取文件后缀名
console.log(fileExtension); 
// 输出结果为: jpg

代码解释：

首先定义了一个变量 fileName，表示上传的文件名。这里假设文件名为 example.jpg。然后使用 split() 方法将文件名按照 . 分隔开来，得到一个数组。由于文件名可能包含多个 .，所以使用 pop() 方法获取数组中的最后一个元素，即文件的后缀名。

2. 判断后缀名是否合法

在获取到上传文件的后缀名后，就可以通过以下示例代码来判断后缀名是否合法：

var allowedExtensions = /(\.jpg|\.jpeg|\.png|\.gif)$/i; // 定义允许上传的后缀名

if (!allowedExtensions.exec(fileExtension)) {
    console.log("文件类型不合法，请上传 jpg、jpeg、png 或 gif 格式的文件！");
} else {
    console.log("文件类型合法！");
}

代码解释：

首先定义了一个变量 allowedExtensions，表示允许上传的后缀名。这里使用正则表达式来表示允许上传的后缀名。正则表达式中的 /i 表示不区分大小写。

然后使用 exec() 方法来匹配文件后缀名和允许上传的后缀名是否一致。如果不一致，则提示用户上传 jpg、jpeg、png 或 gif 格式的文件；否则提示上传文件类型合法。

示例说明

下面提供两个示例，分别演示了如何判断上传文件的后缀名是否合法：

示例一

<input type="file" onchange="checkFileExtension(this)">

function checkFileExtension(input) {
    var fileName = input.files[0].name; // 获取上传的文件名
    var fileExtension = fileName.split('.').pop();

    var allowedExtensions = /(\.jpg|\.jpeg|\.png|\.gif)$/i; // 定义允许上传的后缀名

    if (!allowedExtensions.exec(fileExtension)) {
        alert("文件类型不合法，请上传 jpg、jpeg、png 或 gif 格式的文件！");
        input.value = ""; // 清空已选择的文件
    }
}

在上面的例子中，当用户选择上传文件时，会触发 checkFileExtension() 函数，该函数会获取到用户选择的文件名和后缀名，然后和允许上传的后缀名进行匹配，如果不合法，则弹出提示框，并清空已选择的文件。

示例二

<form onsubmit="return checkForm()">
    <input type="file" name="file">
    <input type="submit" value="上传">
</form>

function checkForm() {
    var fileElement = document.getElementsByName("file")[0];
    var fileName = fileElement.files[0].name;
    var fileExtension = fileName.split('.').pop();

    var allowedExtensions = /(\.jpg|\.jpeg|\.png|\.gif)$/i;

    if (!allowedExtensions.exec(fileExtension)) {
        alert("文件类型不合法，请上传 jpg、jpeg、png 或 gif 格式的文件！");
        return false; // 阻止表单提交
    }

    return true; // 表单提交
}

在上面的例子中，当用户点击表单中的“上传”按钮时，会触发 checkForm() 函数，该函数会获取到用户选择的文件名和后缀名，然后和允许上传的后缀名进行匹配，如果不合法，则弹出提示框，并阻止表单提交。否则允许表单提交。