客戶端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. 格式不區分大小寫