Javascript upload file size

Question

I need help with file size on upload. i'd like to add file maximum size 2MB.

I use javascript code and i'm not good with javascript so if you guys can add file size into my code. Thanks.

var _validFileExtensions = [".jpg", ".jpeg", ".png"];    
function Validate(oForm) {
    var arrInputs = oForm.getElementsByTagName("input");
    for (var i = 0; i < arrInputs.length; i++) {
        var oInput = arrInputs[i];
        if (oInput.type == "file") {
            var sFileName = oInput.value;
            if (sFileName.length > 0) {
                var blnValid = false;
                for (var j = 0; j < _validFileExtensions.length; j++) {
                    var sCurExtension = _validFileExtensions[j];
                    if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase() == sCurExtension.toLowerCase()) {
                        blnValid = true;
                        break;
                    }
                }
                
                if (!blnValid) {
                    alert("Sorry,   " + sFileName + " is invalid, allowed extensions are: " + _validFileExtensions.join(", "));
                    return false;
                }
            }
        }
    }
  
    return true;
}

Answer 1

This is the code I ended up writing

It can still be optimized in various ways, so its open for any performance, semantic or refactoring edits. I am not an expert.

Code Explained

1. In var _maxFilsize you have to write size of max file size to be allowed in bytes.
2. Function Validate has parameter oForm which expects an HTML object, through which it can search for input fields.
3. Store all input elements in an array, arrInputs.
4. Store value of arrInputs[i].type in string form in variable inputType
5. Compare the value of inputType with different input types in if/else statements.
6. When condition is met, each block returns a function that validates the matched input field
7. Function validateImage takes an argument which is simply the input field's property that contains list of files selected by user, arrInputs[i].files.
8. In validateImage Function there is a for loop that iterates over the list of files and validates their type and size, and returns true or false depending upon validity of file.

Code

var _maxFilesize = 2000000;// in bytes
function Validate(oForm) {
    var arrInputs = oForm.getElementsByTagName("input");
    var inputType;
    var i = 0;
    var arrLength = arrInputs.length;
    for (i; i < arrLength; i++) {
        inputType =arrInputs[i].type.toString();
        if (inputType === "file"){
            return validateImage(arrInputs[i].files);//calls function for validating image
        }else if(inputType === "email"){
            //call email validating function
        }//add validation for more fields
    }
}
function validateImage(file){
    var j = 0;
    var NumberOfFiles = file.length;
    for(j; j< NumberOfFiles;j++){
        if ((file[j].type === "image/jpeg" || file[j].type === "image/png")&& (file[j].size)<= _maxFilesize){
            return true //or whatever you want to do here like calling a function to upadate view, or something
        }
        else{
            return false //or whatever you want to do here like calling a function to upadate view, or something
        }
    }
}