客户端javascript上的验证

Question

我正在使用asp.net进行简单的项目，我创建了一个表单，用户可以在其中上传文件。 在将数据存储到客户端之前，我采取了变通办法来检查文件扩展名，如果文件未映像则停止回发

 function checkFileExtention() { var file = document.getElementById('FileUpload1').value; var lastIndex = file.lastIndexOf("."); var fileExt = file.substr(lastIndex + 1).toLowerCase(); var isValidExtention=0; var i; var extArray = ["jpg", "png", "gif", "jpeg"]; for (i = 0; i < extArray.Length; i++) { if (fileExt == extArray[i]) { isValidExtention = 1; return true; break; } else { document.getElementById("demo").innerText = "invalid"; return false; isValidExtention = 0; } } } 

 <asp:LinkButton ID="addButton" runat="server" type="submit" CausesValidation="true" OnClick="addButton_Click" OnClientClick="if (!checkFileExtention()) {return false;}">Add</asp:LinkButton> 

但我遇到了一些问题，即使循环外变量isValidExtention的值始终为0，我也无法在循环内显示警报或设置文本

任何帮助，将不胜感激

Answer 1

你可以试试看

function checkFileExtention() {
       var file = document.getElementById('FileUpload1').value;
        if (file != "") {
            var fileExt  = file.match(/\.([^\.]+)$/)[1];
             var isValidExtention=0;
            var i;
            var extArray = ["jpg", "png", "gif", "jpeg"];

        for (i = 0; i < extArray.Length; i++) {

            if (fileExt.toLowerCase() == extArray[i]) {

                isValidExtention = 1;
                document.getElementById("demo").innerText = "";                   
                break;
            }
            else {
                document.getElementById("demo").innerText = "invalid";
                isValidExtention = 0;                   

            }
    }
});

检查文件扩展名的第二种方法，

function checkFileExtention() {
       var file = document.getElementById('FileUpload1').value;
        if (file != "") {
            var ext = file.match(/\.([^\.]+)$/)[1];
            var isValidExtention=0;
            ext.toLowerCase();
            if (ext == "png" || ext == "jpg" || ext == "jpeg" || ext=="gif") {
                isValidExtention = 1;
                    return true;                   
            }
            else {
               document.getElementById("demo").innerText = "invalid";
               isValidExtention = 0;
               return false;

            }
        }
    });

Answer 2

代码中唯一的问题就是小错误，就像您使用“长度”而不是长度一样。 我修改了您的代码，请看一看。

function checkFileExtention() {
        var file = document.getElementById('FileUpload1').value;
        var lastIndex = file.lastIndexOf(".");
        var fileExt = file.substr(lastIndex + 1).toLowerCase();

        var isValidExtention = false;
        var i;
        var extArray = ["jpg", "png", "gif", "jpeg"];
        for (i = 0; i < extArray.length; i++) {
            if (fileExt == extArray[i]) {
                isValidExtention = true;
                document.getElementById("demo").innerText = "";
                break;
            }
            else {
                document.getElementById("demo").innerText = "invalid";
            }
        }
        return isValidExtention;
    }

Answer 3

请检查以下代码。 我们限制上传文件文件是否为图片之前。

   var oFileIn = document.getElementById('fileupload');        
    if (oFileIn.addEventListener) {
        oFileIn.addEventListener('change', filePicked, false);
    }

    function filePicked(event) {
    var files = event.target.files;
    var regex = new RegExp("(.*?)\.(png|gif|jpg|jpeg)$");
    if (!(regex.test(files[0].name)))
    {
        alert('Please select image files');
        var oFileIn = document.getElementById('fileupload');
        oFileIn.value='';
        return;
    }

    }

希望对您有帮助。

谢谢并问候Angappan.S

Answer 4

试试看：

const regex = /.+\.(jpg|jpeg|gif|png)\s*$/mig;
const str = `image.jpg
image.notmatching
capitalLetterFormat.PNG
.jpg
`;

它检查以下内容：

1. 图片格式符合您的格式
2. 忽略在图像末尾添加的可能空格
3. 格式化图像的名称不能为空。
4. 格式不区分大小写