Question

我有下面给出的代码，当我选择文件并警告您选择的内容不能超过等时，该文件正在对文件进行计数...

限制为4，当我选择6时，它说不能选择超过4。但是当我选择4时，它添加并在选择一个或4时再次显示拇指anad，它再次添加了新的4个文件或其他文件，因此用户可以上传无限的文件。

如何捕获所选文件并限制它们。

<div class="m-form__group form-group row">
    <label for="exampleInputEmail1" class="col-form-label col-lg-3 col-sm-12">
    Select Image
    </label>
    <div class="col-lg-9 col-md-9 col-sm-12">
        <div class="col-lg-12 col-md-9 col-sm-12" id="thumb-output">
        <input id="files" class="" type="file" name="file[]" multiple>
        </div>
    </div>
</div>

$(document).ready(function() {

$('input[type=file]').on('dragenter', function() {
    $('div').addClass('dragover');
});

$('input[type=file]').on('dragleave', function() {
    $('div').removeClass('dragover');
});

if (window.File && window.FileList && window.FileReader) {
    var numFiles = $('input[type=file]')[0].files.length;

    $("#files").on("change", function(e) {
      var files = e.target.files, filesLength = files.length;

    if(files.length > 4){
        alert("you can select max 4 files.");
    }else{
      for (var i = 0; i < filesLength; i++) {
        var f = files[i]
        var fileReader = new FileReader();
        fileReader.onload = (function(e) {
          var file = e.target;
          $("<span class=\"pip\">" +
            "<img class=\"imageThumb\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" +
            "<br/><span class=\"remove\">Remove</span>" +
            "</span>").insertAfter("#files");
          $(".remove").click(function(){
            $(this).parent(".pip").remove();
          });
        });
        fileReader.readAsDataURL(f);
      }
    }
    });
        } else {
    alert("Your browser doesn't support to File API")
  }
});

Answer 1

您可以使用全局变量来跟踪已添加的文件数。

var fileAdded = 0;

...

if(fileAdded + files.length > 4){
    alert("you can select max 4 files.");
} else {
    fileAdded = fileAdded + files.length;
    for (var i = 0; i < files.length; i++) {

    ...

    }
}

此外，请记住在用户删除文件时减少fileAdded。

这里是一个例子：

var fileDict = new Object();

$(document).ready(function() {
    if (window.File && window.FileList && window.FileReader) {
        var numFiles = $('input[type=file]')[0].files.length;

        $("#files").on("change", function(e) {
            var files = e.target.files, filesLength = files.length;

            if(Object.keys(fileDict).length + files.length > 4){
                alert("you can select max 4 files.");
            }else{
                for (var i = 0; i < filesLength; i++) {
                    var f = files[i];
                    fileDict[f.name] = f;
                    var fileReader = new FileReader();
                    fileReader.onload = (function(e) {
                        $("<div class=\"pip\">" +
                          "<img class=\"imageThumb\" src=\"" + e.target.result + "\" title=\"" + f.name + "\"/>" +
                          "<br/><span class=\"remove\" data-name=\""+f.name+"\">Remove</span>" +
                          "</div>").insertAfter("hr");
                    });
                    fileReader.readAsDataURL(f);
                }
            }
        });
    } else {
        alert("Your browser doesn't support to File API");
    }
});

$(document).on('click', '.remove', function(){
  delete fileDict[$(this).data("name")];
  $(this).parent(".pip").remove();
});

var upload = function() {
  let formData = new FormData();
  var i = 0;

  Object.keys(fileDict).forEach(item => {
    formData.append("file" + i, fileDict[item]);
    i += 1;
  });

  $.ajax({ 
      type: 'post', 
      url: '/upload.php',
      enctype: 'multipart/form-data',
      processData: false,
      contentType: false,
      data: formData ,
      success: function(data) {
                alert(data);
              }
      });
}

img {
    max-width: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input id="files" class="" type="file" name="file[]" multiple>

<hr>

<input type="button" value="Upload" onclick="upload()">

我不确定您使用哪种语言作为后端。我在这里使用PHP：

<?php
if (count($_FILES) > 4) {
  echo "you can select max 4 files.";
} else {
  foreach ($_FILES as $file_id => $file) {
    if ($file['error'] > 0) {
      echo 'Error: ' . $file['error'] . '<br>';
    } else {
      move_uploaded_file($file['tmp_name'], 'uploads/' . $file['name']);
      echo 'uploads/' . $file['name'] . '<br>';
    }
  }
}

使用dropzone上传多个文件的限制不起作用

1 个答案: