JS：自定义 JS 验证在 Internet Explorer 中不起作用

Question

我在 Internet Explorer 中遇到表单验证问题。

在以下脚本中，我在HTML 中创建了一个表单，并编写了 JavaScript 逻辑以在提交表单之前执行表单验证。

该脚本正确验证表单并仅在 Chrome 和 Firefox 中发出警报，但在 Internet Explorer 中没有，我想知道为什么？：

http://jsfiddle.net/PKLQn/121/

var error="";

function Checkfiles() {
    var fup = document.getElementById('flUpload');
    var fileName = fup.value;
    var ext = fileName.substring(fileName.lastIndexOf('.') + 1);
    var chkext = ext.toLowerCase();
    //var mime = fup.type;
    //if (mime=='image/png' || mime=='image/jpeg' || mime=='image/gif') {
    if(chkext=="gif" || chkext=="jpg" || chkext=="jpeg" || chkext=="png") { 
        return true;
    } else { return false; }
} // Checkfiles

function Checksize() { 
    var iSize;
    if ($("#flUpload")[0].files[0]){
        iSize = ($("#flUpload")[0].files[0].size / 1024);
    }
    if(Checkfiles()==true) {
        if (iSize < 51200.00) { 
            return true;
        }
        else{
            return false;
        }
    } else { error += "- Upload GIF, PNG, JPG images only, smaller than 50 KB."; return false; }
} //Checksize

function Checkfields() {
    // Validate Email
    var email = $("#email").val();
    if (/(.+)@(.+){2,}\.(.+){2,}/.test(email)) { } else { error += "- Please enter a valid email address (eg. http://youwebsite.com)\n"; }
    // Validate Title
    var title = $("#title").val();
    if (title=="" || title==null) { error += "- Please enter a valid title for your advertisement (Max. 60 chars.)\n"; }    
    // Validate URL
    var url = $("#url").val();
    if (/^(http[s]?:\/\/){0,1}(www\.){0,1}[a-zA-Z0-9\.\-]+\.[a-zA-Z]{2,5}[\.]{0,1}/.test(url)) { } else { error += "- Please enter a valid URL.\n"; }
}// Checkfields

function newfuncion() {
        var fields = Checkfields();
        var size = Checksize();
        var files = Checkfiles();
        if(fields==true && size==true && files==true) {
            return true;
        } else {
            if(error!=""){alert(error); error=""; return false;} else {return true;}
            return false;
        }
} //Juntar todas las funciones

input[type="text"] {
  display: inline-block;
  padding: 3px 8px;
  margin: 5px 0px 5px 10px;
}
label {
  font-weight: bold;
  cursor: pointer;
}
.submit-btn {
  background: #4CAF50;
  border: none;
  color: #fff;
  padding: 8px 15px;
  text-align: center;
  font-size: 13px;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="fff1" onsubmit="return newfuncion();">
    <label for="email">Email: </label> <input type="text" placeholder="Email" id="email" /><br/>
    <label for="title">Title: </label> <input type="text" placeholder="Title" id="title" /><br/>
    <label for="url">URL: </label> <input type="text" placeholder="URL" id="url" /><br><br>
    <input type="file" id="flUpload" /><br/><br>
    <input type="submit" class="submit-btn" value="CONTINUE" />
</form>

我想知道为什么我的代码无法在 Internet Explorer 8、9 上运行？

Answer 1

IE 8/9 不支持“多文件”上传，因此 <input type="file"> 的 .files 属性返回 null。您尝试访问它的第一个索引，就像它返回一个数组一样，给出错误"Unable to get property '0' of undefined or null reference。还值得注意的是，.size 属性在 HTML5 之前不可用，您的代码也应该检查这一点。在旧版浏览器中，您无法仅使用 JavaScript 检查文件大小。

由于您没有使用多文件上传（至少不是根据您的示例代码），您可以使用input.value 检查是否存在要上传的文件。尝试将 .files[0] 更改为 .value 并更改文件大小检查的逻辑，这应该可以解决您在所有浏览器中的问题。