html - 如何限制用户一次最多上传 10 个文件？

Question

我<input type="file" multiple="multiple">在我的网页中使用来上传文件（使用ajaxupload）。它将允许用户一次上传多个文件。但我想限制用户一次只能选择 10 个文件，不超过这个。

我怎样才能做到这一点？

Answer 1

<input id="files" type="file" name="files[]" multiple="multiple" onchange="checkFiles(this.files)">

function checkFiles(files) {       
    if(files.length>10) {
        alert("length exceeded; files have been truncated");

        let list = new DataTransfer;
        for(let i=0; i<10; i++)
           list.items.add(files[i]) 

        document.getElementById('files').files = list.files
    }       
}

此功能将不允许选择超过 10 个文件。

Answer 2

这段代码可以满足您的需求，并且还会阻止提交表单。

<script>
    $(function() {
        $("button[type = 'submit']").click(function(event) {
            var $fileUpload = $("input[type='file']");
            if (parseInt($fileUpload.get(0).files.length) > 10) {
                alert("You are only allowed to upload a maximum of 10 files");
                event.preventDefault();
            }
        });
    });
</script>