Question

我有多个浏览按钮。我想从至少4个浏览按钮上传文件时显示“应用”按钮。当我从单个浏览按钮上传文件时，我可以检查文件的长度。但是，当我从多个上传文件上传文件时，如何检查文件长度。

这是我的HTML代码：

这是我的JavaScript代码：

<input type="file" class="files" name="file" /> Read bytes: 
<input type="file" class="files" name="file" /> Read bytes: 
<input type="file" class="files" name="file" /> Read bytes: 
<input type="file" class="files" name="file" /> Read bytes: 
<span class="readBytesButtons">
  <button>Apply</button>
</span>

效果不佳。如何找到上传文件的总长度？

Answer 1

如果要检查插入的文件数量，则最有可能需要为每个文件输入添加事件侦听器。然后在插入文件时增加，然后检查是否添加了所需的amound，你可能会得到这样的结果：

var insertedFiles = 0;

var allFileElements = document.getElementsByClassName('files');

for (var i = allFileElements.length - 1; i >= 0; i--) {
    allFileElements[i].addEventListener("change",check);
};

function update(){
    if(this.value == "") { 
        insertedFiles--;
    } else {
        insertedFiles++;
    }
    check();
}
function check(){
    if(insertedFiles > 4){
        alert("Show button.");
    } else {
        alert("You need to add more files.");
    }
}

小提琴：https://jsfiddle.net/aL0qhoe0/2/

Answer 2

您可以向输入元素的“change”事件添加事件侦听器。

触发此事件后，您可以循环fileElements并使用files.length检查文件数。然后，您可以跟踪包含0个以上文件的元素数量。

如果所有元素都有上传文件，您可以启用该按钮。

例如：

var fileElements = document.getElementsByClassName('files');

for (var i = 0; i < fileElements.length; i++) {
    fileElements[i].addEventListener("change", countFiles);
}

function countFiles() {
    var elementsWithFiles = 0;

    for (var j = 0; j < fileElements.length; j++) {
        if (fileElements[j].files.length > 0) {
            elementsWithFiles++;
        }
    }

    if (elementsWithFiles > fileElements.length -1) {
        document.getElementById("readBytesButtons").style.display = "block";
    }
}

.readBytesButtons {
    display: none;
}

<form id="" name="">
    <input type="file" class="files" name="file"/> Read bytes:
    <input type="file" class="files" name="file"/> Read bytes:
    <input type="file" class="files" name="file"/> Read bytes:
    <input type="file" class="files" name="file"/> Read bytes:
    <span class="readBytesButtons" id="readBytesButtons">
      <button>Apply</button>
    </span>
</form>

检查使用JavaScript上传的文件数量的长度

2 个答案: