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

Question

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

这是我的 HTML 代码:

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

这是我的 JavaScript 代码:

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

if (allFiles.length > 4) {
    alert('Please select a file!');
} else {
   // code to show apply button
}

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

Answer 1

您可以将事件监听器添加到输入元素的“更改”事件。

触发此事件时，您可以循环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>