Javascript JQuery文件输入验证和隐藏div

我有一些意见

<div class="row">
    <div class="col-md-6 col-sm-offset-3 file-input">
        <div class="input-group">
            <input type="text" class="form-control" id="fileOneContainer" readonly>
        <span class="input-group-btn">
            <span class="btn btn-primary btn-file">
                Browse&hellip; <input type="file" id="fileOne" name="fileOne" class="fileGroup">
            </span>
        </span>
        </div>
    </div>
    <div class="col-md-6 col-sm-offset-3 file-input">
        <div class="input-group">
            <input type="text" class="form-control" id="fileTwoContainer" readonly>
            <span class="input-group-btn">
                <span class="btn btn-primary btn-file">
                    Browse&hellip; <input type="file" id="fileTwo" name="fileTwo" class="fileGroup">
                </span>
            </span>
        </div>
    </div>
</div>

这似乎有效，尽管我认为它可以改进

无论如何，我现在需要处理第二个输入。最初，此输入应隐藏，并且仅在单击“添加更多”按钮时显示。现在我真的不想通过css隐藏它，因为这可以使用开发人员工具进行更改

第二个输入的规则与上述基本相同，但不需要此输入。仅当第一个输入有值时，此输入才应有值。因此，除非您已经将文件上载到第一个输入，否则您不能将文件上载到第二个输入

处理第二次输入以获得我想要的影响的最佳方式是什么

谢谢你的建议

谢谢

更新 所以我现在有了这个

    var fileInputs = document.querySelectorAll('.fileGroup');

    for (var i = 0; i < fileInputs.length; i++) {
        fileInputs[i].addEventListener('change', function(event){
            error = validateFile(event);
            errors.push(error);
        });
    };

function validateFile(event) {
    var input = event.target;
    var fileLength = input.files[0].length;
    var fileSize = input.files[0].size;
    var fileType = input.files[0].type;

    if(fileLength == 0) {
        $(this).addClass('error');
        return("- Please upload a document");
    } else if(fileSize > 2097152) {
        return("- Please upload a file smaller than 2MB");
    } else if(  fileType != 'image/bmp' &&
                fileType != 'image/jpeg' &&
                fileType != 'image/pjpeg' &&
                fileType != 'image/png' &&
                fileType != 'image/tiff' &&
                fileType != 'application/pdf') {
        return("- Please upload one of the valid document types");
    }
}

var fileInputs=document.querySelectorAll（'.fileGroup'）；
对于（var i=0；i2097152）{
返回（“-请上传一个小于2MB的文件”）；
}else if（文件类型！=“image/bmp”&&
文件类型！=“图像/jpeg”&&
文件类型！=“图像/pjpeg”&&
文件类型！=“图像/png”&&
文件类型！=“图像/tiff”&&
文件类型！=“应用程序/pdf”）{
返回（“-请上传其中一种有效的文件类型”）；
}
}

问题是我需要在表单提交后显示错误，而不是在fileinput更改时显示错误。有没有办法在没有变更事件的情况下做到这一点

---

谢谢

尝试使用

accept

属性设置为

“.bmp、.jpeg、.jpg、.pjpeg、.png、.tiff、.pdf”

，将

禁用

添加到第二个

输入

，在

更改
第一个
输入的事件处理程序时将
禁用
设置为
false


var errors=[]；
$（文档）.on（“更改”，“文件一”，“文件二：未（：禁用）”，函数（）{
console.log（this.files）；
如果（此.files[0].size>2097152）{
错误。推送（“-请上传小于2MB的文件”）；
};
if（this.files.length）{
$（“#fileTwo”）.prop（“已禁用”，false）
}
})

浏览&hellip；
浏览&hellip；
我建议通过循环输入并绑定一个on change事件侦听器来验证文件。这样，您就不必重复逻辑，并且可以通过事件获取上下文

function validateFile(event) {
    var input = event.target;
    var fileSize = input.files[0].size;
    // rest of validation logic here.

}

var fileInputs = document.querySelectorAll('.fileGroup')

for (var i = 0; i < fileInputs.length; i++) {
    fileInputs[i].addEventListener('change', function(event){
        validateFile(event);
    });
};

索引是页面上表单的索引。如果只有一种形式，则很可能是0

这是一把小提琴：
感谢您的输入，我用新问题更新了OP。感谢您的输入，我正在尝试处理表单提交时的错误，而不是更改文件输入（因为我有许多其他表单元素）。我已经用我正在尝试的内容更新了OP。@kate_hudson“试图处理表单提交时的错误，而不是更改文件输入（因为我有许多其他表单元素）。”是的<代码>错误
似乎是在
输入
更改事件之外定义的数组；可以在
表单
提交中访问
错误
数组吗？
function validateFile(event) {
    var input = event.target;
    var fileSize = input.files[0].size;
    // rest of validation logic here.

}

var fileInputs = document.querySelectorAll('.fileGroup')

for (var i = 0; i < fileInputs.length; i++) {
    fileInputs[i].addEventListener('change', function(event){
        validateFile(event);
    });
};

document.forms[index].onsubmit = function() {
    validateFile();
}