主页 / 问题 / 865482
Accepted
Азамат Шарафутдинов
Asked:2020-08-07 19:41:06 +0000 UTC2020-08-07 19:41:06 +0000 UTC

限制上传文件的数量

  • 772

有一个脚本，由于某种原因，它在这里不起作用。
任务如下：限制上传文件数量为10个。我们选择了11个，只添加10个，删除第11个。添加了 3 个文件 - 只能上传 7 个。

      $(document).ready(function() {
      $(".add_photo-item").on("click", function() {
            $('#js-photo-upload').trigger("click");
        });

  var maxFileSize = 2 * 1024 * 1024; // (байт) Максимальный размер файла (2мб)
    var queue = {};
    
    var imagesList = $('#uploadImagesList');
    var itemPreviewTemplate = imagesList.find('.item').clone();
    imagesList.find('.item').remove();


    $('#js-photo-upload').on('change', function () {
        var files = this.files;      
 
            for (var i = 0; i < files.length; i++) {
                var file = files[i];
                if ( !file.type.match(/image\/(jpeg|jpg|png|gif)/) ) {
                    alert( 'Фотография должна быть в формате jpg, png или gif' );
                    continue;
                }
                if (file.size > maxFileSize) {
                    alert( 'Размер фотографии не должен превышать 2 Мб' );
                    continue;
                }    
                preview(files[i]);
            }
        this.value = '';
    });

    function preview(file) {   
        var reader = new FileReader();
        reader.addEventListener('load', function(event) {
            var img = document.createElement('img');
            var itemPreview = itemPreviewTemplate.clone();
            itemPreview.find('.img-wrap img').attr('src', event.target.result);
            itemPreview.data('id', file.name);
            imagesList.append(itemPreview);
            queue[file.name] = file;

        });
        reader.readAsDataURL(file);     
    }


});
#js-photo-upload {
           display: none;
       }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <input type="file" name="add-photo" multiple id="js-photo-upload">
    <div class="add_photo-content">
    <ul id="uploadImagesList">
    <li class="item"><span class="img-wrap"><img src="" alt=""></span><span class="delete-link" title="Удалить">Удалить</span></li>
    </ul>
    <div class="add_photo-item">+</div>
    </div>

javascript

1 个回答

  1. Best Answer

    更改和添加的行和函数提供了上面的注释（没有调试和可见性，新代码不到三倍）：

    $(document).ready(function() {
  $('.add_photo-item').on('click', function() {
    $('#js-photo-upload').trigger('click');
  });

  var maxFileSize = 2 * 1024 * 1024; // (байт) Максимальный размер файла (2мб)
  var queue = {};

  var imagesList = $('#uploadImagesList');
  // 'detach' подобно 'clone + remove'
  var itemPreviewTemplate = imagesList.find('.item').detach();

  // Вычисление лимита
  function limitUpload() {
    return 10 - imagesList.children().length;
  }
  // Отображение лимита
  function limitDisplay() {
    let sTxt;
    switch (limitUpload()) {
      case 10:
        sTxt = '+ (можно добавить ' + limitUpload() + ' изображений)';
        break;
      case 0:
        sTxt = 'Нельзя больше добавить - достигнут лимит';
        break;
      default:
        sTxt = '+ (можно добавить ещё ' + limitUpload() + ')';
    }
    $('.add_photo-item').html(sTxt);
  }

  $('#js-photo-upload').on('change', function() {
    var files = this.files;
    // Перебор файлов до лимита
    for (var i = 0; i < limitUpload(); i++) {

      var file = files[i];
      if (!file.type.match(/image\/(jpeg|jpg|png|gif)/)) {
        alert('Фотография должна быть в формате jpg, png или gif');
        continue;
      }
      if (file.size > maxFileSize) {
        alert('Размер фотографии не должен превышать 2 Мб');
        continue;
      }
      preview(files[i]);
    }
    this.value = '';
  });

  function preview(file) {
    var reader = new FileReader();
    reader.addEventListener('load', function(event) {
      var img = document.createElement('img');
      var itemPreview = itemPreviewTemplate.clone();
      itemPreview.find('.img-wrap img').attr('src', event.target.result);
      itemPreview.data('id', file.name);
      imagesList.append(itemPreview);
      // Обработчик удаления
      itemPreview.on('click', function() {
        delete queue[file.name];
        $(this).remove();
        limitDisplay();
      });

      queue[file.name] = file;
      // Отображение лимита при добавлении
      limitDisplay();
    });
    reader.readAsDataURL(file);
  }
  // Отображение лимита при запуске
  limitDisplay();
});
    #js-photo-upload {
  display: none;
}

/* Для отладки */
.item img {
  width: 24px;
  height: 18px;
}
.add_photo-item {
  border: 1px red solid;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="file" name="add-photo" multiple id="js-photo-upload">
<div class="add_photo-content">
  <ul id="uploadImagesList">
    <li class="item"><span class="img-wrap"><img src="" alt=""></span><span class="delete-link" title="Удалить">Удалить</span></li>
  </ul>
  <div class="add_photo-item">+</div>
</div>

    • 4

相关问题