如何限制上傳的圖像文件的最大數量

Question

我想通過向以下code添加警報來限制圖像文件的最大上載

警報是alert("You Have Reached The MAXIMUM Upload Limit"); 所以當我逐個添加到指定的限制時，會出現一個alert

<div class="files col-sm-4" id="files1">
    <input type="file" name="files1" id="imagesix" multiple />
    <br />Selected files:
    <ol class="fileList"></ol>
</div>

腳本

$.fn.fileUploader = function (filesToUpload) {
    this.closest(".files").change(function (evt) {

        for (var i = 0; i < evt.target.files.length; i++) {
            filesToUpload.push(evt.target.files[i]);
        };
        var output = [];

        for (var i = 0, f; f = evt.target.files[i]; i++) {
            var removeLink = "<i class=\"fa fa-times fa-close removeFile\" href=\"#\" data-fileid=\"" + i + "\"></i>";

            output.push("<li><strong>", escape(f.name), "</strong> ", removeLink, " </li> ");
        }

        $(this).children(".fileList")
            .append(output.join(""));
    });
};

var filesToUpload = [];

$(document).on("click",".removeFile", function(e){
    e.preventDefault();
    var fileName = $(this).parent().children("strong").text();
    for(i = 0; i < filesToUpload.length; ++ i){
        if(filesToUpload[i].name == fileName){
            filesToUpload.splice(i, 1);
        }   
    }
    $(this).parent().remove();
});


$("#files1").fileUploader(filesToUpload);

Answer 1

這個代碼我為我的項目實現，但根據您的要求，您可以更改它。

refrence： 這個stackoverflow問題

$(function(){
  $("input[type='submit']").click(function(){
    var $fileUpload = $("input[type='file']");
    if (parseInt($fileUpload.get(0).files.length)>2){
     alert("You can only upload a maximum of 2 files");
    }
  });    
});

Answer 2

您可以使用Dropzone.js插件。 它允許您根據需要進行配置。