使用javascript

时间:2015-07-06 13:37:15

标签: javascript forms validation

这是文件上传页面:

<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>

这是JavaScript验证:

<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>

现在发生的问题是

当我点击上传按钮时,我收到以下消息:

  

未选择上传文件。

现在,我不刷新页面并浏览无效文件,然后单击上传。它现在显示:

  

未选择上传文件。

     

无效的文件格式。仅允许.xlsx,.xls和.xlt文件格式。

我希望不显示之前的消息。它应该只显示:

  

无效的文件格式。仅允许.xlsx,.xls和.xlt文件格式。

但是还会显示以下消息

  

未选择上传文件

1 个答案:

答案 0 :(得分:0)

您永远不会将display值重置为隐藏,因此无论何时将其更改为空白字符串,它都不会更改为...尝试此操作:

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