如何將id作為FileUpload的參數傳遞給javascript函數以檢查文件的擴展名和大小

Question

我正在asp.net Web應用程序上工作，在該應用程序中，我有6個用於一個文件上傳的FileUpload控件，我創建了一個javascript方法來檢查文件擴展名和文件大小。 但是如何動態傳遞FileUpload上載的ID，以便僅以一種方法我就可以驗證所有FileUpload我的Javacript代碼是

  var validFilesTypes = ["bmp", "gif", "png", "jpg", "jpeg", "doc", "docx",         "xls", "xlsx", "htm", "html", "rar", "zip", "txt", "pdf"];
    function CheckExtension() {
        /*global document: false */
        var file = document.getElementById("<%=txtTenderDoc.ClientID%>");
        var path = file.value;
        var ext = path.substring(path.lastIndexOf(".") + 1, path.length).toLowerCase();
        var isValidFile = false;
        for (var i = 0; i < validFilesTypes.length; i++) {
            if (ext == validFilesTypes[i]) {
                isValidFile = true;
                break;
            }
        }
        if (!isValidFile) {
            alert("Invalid File. Unknown Extension Of Tender Doc" + "Valid extensions are:\n\n" + validFilesTypes.join(", "));
        }
        return isValidFile;
    }

    function validateFileSize() {
        /*global document: false */
        var file = document.getElementById("<%=txtTenderDoc.ClientID%>");
        var fileSize = file.files[0].size;
        var isValidFile = false;
        if (fileSize !== 0 && fileSize <= 25214400) {
            isValidFile = true;
        }
        if (!isValidFile) {
            alert("File Size Should be Greater than 0 and less than 25 mb");
        }
        return isValidFile;
    }

我已經在aspx頁面中使用了

<asp:FileUpload ID="txtTenderDoc" onchange="var result= CheckExtension();validateFileSize(); return result"
                        runat="server"></asp:FileUpload>

如您所見，我必須通過此方法創建6個方法來檢查文件大小和文件擴展名如何僅用一種方法來執行此操作....

Answer 1

function CheckExtension(Id) {
    /*global document: false */
    var file = document.getElementById(Id);
    var path = file.value;
    var ext = path.substring(path.lastIndexOf(".") + 1, path.length).toLowerCase();
    var isValidFile = false;
    for (var i = 0; i < validFilesTypes.length; i++) {
        if (ext == validFilesTypes[i]) {
            isValidFile = true;
            break;
        }
    }
    if (!isValidFile) {
        alert("Invalid File. Unknown Extension Of Tender Doc" + "Valid extensions are:\n\n" + validFilesTypes.join(", "));
    }
    return isValidFile;
}   


function validateFileSize(Id) {
    /*global document: false */
    var file = document.getElementById(Id);
    var fileSize = file.files[0].size;
    var isValidFile = false;
    if (fileSize !== 0 && fileSize <= 25214400) {
        isValidFile = true;
    }
    if (!isValidFile) {
        alert("File Size Should be Greater than 0 and less than 25 mb");
    }
    return isValidFile;
}

<asp:FileUpload ID="txtTenderDoc" onchange="var result=      CheckExtension('textTenderDoc');validateFileSize('textTenderDoc'); return result"  runat="server"></asp:FileUpload>

我假設您要創建六個不同的文件上傳控件。 這樣，您可以在編譯時將id傳遞給Java腳本，因此只有一種方法。

Answer 2

經過網上搜索后，我終於解決了問題並將其發布，因此，如果有人遇到類似問題，這應該會有所幫助

 // set which files are allowed in FileUpload Control
    var validFilesTypes = ["bmp", "gif", "png", "jpg", "jpeg", "doc", "docx", "xls", "xlsx", "htm", "html", "rar", "zip", "txt", "pdf"];
    function CheckExtension(file) {
        /*global document: false */
        var path = file.value;
        var ext = path.substring(path.lastIndexOf(".") + 1, path.length).toLowerCase();
        var isValidFile = false;
        for (var i = 0; i < validFilesTypes.length; i++) {
            if (ext == validFilesTypes[i]) {
                isValidFile = true;
                break;
            }
        }
        if (!isValidFile) {
            alert("Invalid File. Unknown Extension Of Tender Doc" + "Valid extensions are:\n\n" + validFilesTypes.join(", "));
        }
        return isValidFile;
    }

    function validateFileSize(file) {
        /*global document: false */
        //getting size of the file
        var fileSize = file.files[0].size;
        var isValidFile = false;
        if (fileSize !== 0 && fileSize <= 25214400) {
            isValidFile = true;
        }
        if (!isValidFile) {
            alert("File Size Should be Greater than 0 and less than 25 mb");
        }
        return isValidFile;
    }

然后像這樣在FileUpload Control中調用這些方法

<asp:FileUpload ID="fuTenderDoc" onchange="var result=CheckExtension(this);validateFileSize(this); return result"
                        runat="server"></asp:FileUpload>

<asp:FileUpload ID="fuBidDoc" onchange="var result=CheckExtension(this);validateFileSize(this); return result"
                        runat="server"></asp:FileUpload>

 <asp:FileUpload ID="fuTechnicalDoc" onchange="var result=CheckExtension(this);validateFileSize(this); return result"
                        runat="server"></asp:FileUpload>