Question

我正在开发新的Web表单，并放置了一些文件上传框。

我已经有了它并使它工作，但我在限制上传文件按钮的数量上苦苦挣扎。

我想最多限制五个按钮。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <script>
    function addFileUploadBox() {
        if (!document.getElementById || !document.createElement)
            return false;

        var uploadArea = document.getElementById("upload-area");

        if (!uploadArea)
            return;

        var newLine = document.createElement("br");
        uploadArea.appendChild(newLine);

        var newUploadBox = document.createElement("input");
        newUploadBox.type = "file";
        newUploadBox.size = "30";

        if (!addFileUploadBox.lastAssignedId)
            addFileUploadBox.lastAssignedId = 100;

        newUploadBox.setAttribute("id", "FileField" + 
        addFileUploadBox.lastAssignedId);

        newUploadBox.setAttribute("name", "FileField" + 
        addFileUploadBox.lastAssignedId);

        uploadArea.appendChild(newUploadBox);

        addFileUploadBox.lastAssignedId++;
    }    
    </script>

    <p id="upload-area">
        <input type="file" name="file" id="file" size="30">
    </p>

    <input type="button" value="Attach more files" id="btAdd" class="button1" 
    onclick="addFileUploadBox()">

</body>
</html>

拜托，请给我介绍一下我该如何解决。

Answer 1

在addFileUploadBox函数中，您可以检查页面上是否已有5个框，并阻止其创建更多框。

if(document.querySelectorAll('#upload-area input[type="file"]').length >= 5) return false;

如何限制“ FileUploadBox（）”按钮的数量？

1 个答案: