@GreenMan1899

В чем проблема загрузчика файлов?

код
Не могу решить 2 проблемы:
1) Если загрузить много файлов (больше 20) и начать удалять их, то в какой-то момент результирующий массив перестанет уменьшаться.
2) Если через drag n drop можно закидывать по несколько раз файлы, то через клик input file работает только один раз.

$(function() {

  $('.fileuploader').each(function(){
    var fileuploader = $(this),

        inputDOM = fileuploader.find('.fileuploader__input'),
        fieldDOM = fileuploader.find('.fileuploader__field'),
        listDOM = fileuploader.find('.fileuploader__list'),

        maxFileSize = 2000000;

    var filesListObj, filesListArray = [], totalSize, htmlListItemsDOM, htmlListItemsArray = [];

    // поддерживает ли браузер Drag and Drop
    if (typeof(window.FileReader) == 'undefined') {
      fieldDOM.addClass('fileuploader__field--error');
      fieldDOM.text('Не поддерживается браузером!');
    }

    fileuploader[0].ondragover = function() {

      fieldDOM.addClass('fileuploader__field--hover');
      return false;
    };
        
    fileuploader[0].ondragleave = function() {
      fieldDOM.removeClass('fileuploader__field--hover');
      return false;
    };

    fileuploader[0].ondrop = function(event) {
      event.preventDefault();

      for (var i = 0; i < event.dataTransfer.files.length; i++) {
        filesListArray.push(event.dataTransfer.files[i])
      }

      getTotalSize(filesListArray);
      checkSize();
      setList();   
      setTargetFiles();   
      resetFileuploader();
    };

    inputDOM.change(function(event) {

      for (var i = 0; i < inputDOM[0].files.length; i++) {
        filesListArray.push(inputDOM[0].files[i])
      }

      getTotalSize(filesListArray);
      checkSize();
      setList();
      setTargetFiles();
      resetFileuploader();

    });


    function resetFileuploader() {
      fieldDOM.removeClass('fileuploader__field--error fileuploader__field--hover fileuploader__field--droped');
      fieldDOM.text('Перетащите файл или кликните на поле для загрузки с компьютера');
    };

    function getTotalSize(filesListArray) {
      totalSize = filesListArray.reduce(function(sum, current) {
        return sum + current.size;
      }, 0);
    };

    function checkSize() {
      if (totalSize > maxFileSize) {
        fieldDOM.addClass('fileuploader__field--error');
        fieldDOM.text('Файл слишком большой!');
        return false;
      }
    };

    function setList() {
      htmlListItemsArray = [];
      listDOM.find('.fileuploader__item').remove();

      filesListArray.forEach(function(file) {
        listDOM.append('<li class="fileuploader__item">' + file.name + '<svg class="fileuploader__remove xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"  width="24" height="24" viewBox="0 0 24 24"><path fill="#a1a1a1" d="M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z" /></svg></li>');
      });

      htmlListItemsDOM = listDOM.find('.fileuploader__item');

      for (var i = 0; i < htmlListItemsDOM['length']; i++) {
        htmlListItemsArray.push(htmlListItemsDOM[i]);
      }

      handleRemoveBtn();
    };

    function handleRemoveBtn() {

      htmlListItemsArray.forEach(function(item, index) {
        var item = $(item),
            btn = item.find('.fileuploader__remove');


        btn.click(function(){
          filesListArray.splice(index - 1, 1);
          htmlListItemsArray.splice(index - 1, 1);
          console.log('Текущий', filesListArray, htmlListItemsArray);

          item.remove();        
          setTargetFiles();
        });
      });
    };

    // Конечный результат
    function setTargetFiles() {
      console.log('Результат', filesListArray);
      fileuploader.data('files', filesListArray);
    };
  });

});
  • Вопрос задан
  • 57 просмотров
Решения вопроса 1
Enroller
@Enroller
Немного авантюрист
Во первых не понимаю почему Вы пишете splice(index-1, 1)- Так вы удаляете элемент, предшествующий тому на котором был клик.
А если кликать по нулевому то удалится элемент с конца (Первый аргумент splice).
Во вторых дело в том - что Вы жёстко закрепляете индекс у элементов. Т.е:
Есть 10 элементов с индексами 0,1,2,3,4,5,6,7,8,9
Вы удаляете 0 элемент и теперь массив у Вас на 9(Индексы с 0 по 8) элементов
Теперь мы пробуем удалить элемент с индексом 9 и понимаем что нету у нас в массиве такого. Он стал 8ым
Конечно такой splice не сработает и элементов в массиве меньше не станет.
Более того после первого удаления, когда массив сдвинется Вы уже не сможете понять что именно удалилось.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
от 50 000 руб.
HTML Academy Санкт-Петербург
от 150 000 до 180 000 руб.
EducaGroup Санкт-Петербург
от 90 000 руб.