javascript - 使用Javascript限制用户上传与格式不匹配的图像名称

Question

我有固定的图像名称，例如 n.png,n@2x.png,n@4x.png 。其中 n 是数字(1,2,3,4,5,6,7,8,9)

我必须限制用户上传与此格式不匹配的图像名称。

假设如果有人尝试上传 a.png、a@2x.png、a1@4x.png、1.1@2x.png 等，则不应允许并给出错误消息。

为此我有一个表格

<form id="app_form" name="app_form" method="post" enctype="multipart/form-data">
 <label for="appname">Image </label>
 <input type="file" onchange="validate(this);"  class="browse" id="image" name="image[]" value="" style="width:200px;float:left;" multiple="">
 <button type="submit" name="submit" id="submit" class="btn-blue">Update</button>
</form>

Javascript函数

 function validate() {
        var uploadImg = document.getElementById('image');
        //uploadImg.files: FileList
        for (var i = 0; i < uploadImg.files.length; i++) {
           var f = uploadImg.files[i];
           var Extension = f.name.substring(f.name.lastIndexOf('.') + 1).toLowerCase();
            if ( Extension == "png" || Extension == "webp" || Extension == "jpeg" || Extension == "jpg" || Extension == "PNG" || Extension == "WEBP" || Extension == "JPEG" || Extension == "JPG") {
                //    alert(f.name);
                    var one = new RegExp("@2x");
                    var two = new RegExp("@4x");
                    var x = f.name.substring(0, f.name.lastIndexOf('.'));
                    var y = x.substring(0,x.lastIndexOf('@'));
                    if (isNaN(x) == true){
                        if (one.test(f.name) ) {
                             alert(' Valid image 1');
                        } else if (two.test(f.name) & !isNaN(y)) { 
                           alert(' Valid image 2');
                        }
                      return false;
                    }else{
                        alert(f.name + ' In valid Image');
                        return false;
                    }

                    if (uploadImg.files && uploadImg.files[0] ) {
                        var reader = new FileReader();
                        reader.onload = function(e) {
                            $('#image').attr('src', e.target.result);
                        }
                        reader.readAsDataURL(fuData.files[0]);
                    }
                }else {
                    alert("Photo only allows file types of PNG, JPG, JPEG and WEBP. ");
                     var fuData = document.getElementById('image');
                     fuData.value='';
                }
           }
    }

但是它将 1@2x.png 视为无效图像。

注意:

允许的扩展名仅限 png、jpg、jpeg、webp、n.png、n@2x.png、n@4x.png 这里 n 可以是 1-9 之间的任意数字，用户可以同时上传多张图片。

Answer 1

以下正则表达式将完全匹配 n.ext、n@2x.ext 和 n@4x.ext(其中 n 是 1 到 9 之间的数字，ext 属于您在注释中允许的扩展名)，仅此而已:
^[1-9](?:@[24]x)?.(?:png|jpeg|webp)$

演示 here

然后您可以使用 javascript 将它们过滤掉。

编辑:刚刚看到您的注释，我添加了其他文件扩展名。

<小时/>

这是一个有效的 JavaScript 代码:

var regex = /^[1-9](?:@[24]x)?.(?:png|jpeg|webp)$/;
var fileName1 = "2@2x.png";
var fileName2 = "a3.jpeg";

if (fileName1.match(regex)) {
  console.log(fileName1+" is Valid");
} else {
  console.log(fileName1+" is Invalid");
}

if (fileName2.match(regex)) {
  console.log(fileName2+" is Valid");
} else {
  console.log(fileName2+" is Invalid");
}