使用javascript上传文件页面验证

Question

This is the file upload page :

<input type="file" id="fileUpload" />
<input type="submit" value="Upload File" style="margin: 40px 0 0 160px"/>
<div id="fileSelect" style="color:Red;display:none">No file selected for uploading.</div>
<div id="fileFormat" style="color:Red;display:none">Invalid File Format. Only .xlsx, .xls, and .xlt file format allowed.</div>
</form>

This is the JavaScript validation:

<script>
var _validFileExtensions = [".xlsx", ".xls", ".xlt"]; 
function Validate(oForm) {
if( document.getElementById("fileUpload").files.length == 0 ){
     document.getElementById("fileSelect").style.display=""; 
    return false;
}

    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) {
                    document.getElementById("fileFormat").style.display="";
                    return false;
                }
            }
        }
    }

    return true;
}  

</script>

Now the issue happening is

when I click on Upload button I get the following message:

No file selected for uploading.

Now I don't refresh the page and browse for the invalid file and click Upload . It now shows:

No file selected for uploading.

Invalid File Format. Only .xlsx, .xls, and .xlt file format allowed.

I want the earlier message to not be displayed. It should only display:

Invalid File Format. Only .xlsx, .xls, and .xlt file format allowed.

But the following message is also displayed

No file selected for uploading

Answer 1

You are never resetting the display value to hidden, so no matter what once it is changed to a blank string, it won't change back... Try this:

if( document.getElementById("fileUpload").files.length == 0 ){
     document.getElementById("fileSelect").style.display=""; 
    return false;
}
else {
     document.getElementById("fileSelect").style.display="none"; 
}