Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 29.09.2017, 12:12
Аватар для LADYX
Профессор
Отправить личное сообщение для LADYX Посмотреть профиль Найти все сообщения от LADYX
 
Регистрация: 19.02.2015
Сообщений: 217

Ошибка в прикреплении файлов
Добрый день! Есть у меня вот такой скрипт прикрепления файлов в форме обратной связи. Только у него одна ошибка: если добавить файл, потом нажать на "изменить", откроется окно. И если не менять файл, а закрыть окно (ну человек передумал изменять прикрепленный файл), тогда добавленный файл сам удаляется. Помогите, пожалуйста, исправить ошибку. Спасибо!
$('.attach').each(function() { // на случай, если таких групп файлов будет больше одной
  var attach = $(this),
    fieldClass = 'attach__item', // класс поля
    attachedClass = 'attach__item--attached', // класс поля с файлом
    fields = attach.find('.' + fieldClass).length, // начальное кол-во полей
    fieldsAttached = 0; // начальное кол-во полей с файлами

  var newItem = '<div class="attach__item"><label><div class="attach__up">Добавить файл</div><input class="attach__input" type="file" name="files[]" /></label><div class="attach__name"></div><div class="attach__edit">Изменить</div><div class="attach__delete">Удалить</div></div>'; // разметка нового поля

  // При изменении инпута
  attach.on('change', '.attach__input', function(e) {
    var item = $(this).closest('.' + fieldClass),
      fileName = '';
    if (e.target.value) { // если value инпута не пустое
      fileName = e.target.value.split('\\').pop(); // оставляем только имя файла и записываем в переменную
    }
    if (fileName) { // если имя файла не пустое
      item.find('.attach__name').text(fileName); // подставляем в поле имя файла
      if (!item.hasClass(attachedClass)) { // если в поле до этого не было файла
        item.addClass(attachedClass); // отмечаем поле классом
        fieldsAttached++;
      }
      if (fields < 10 && fields == fieldsAttached) { // если полей меньше 10 и кол-во полей равно
        item.after($(newItem)); // добавляем новое поле
        fields++;
      }
    } else { // если имя файла пустое
      if (fields == fieldsAttached + 1) {
        item.remove(); // удаляем поле
        fields--;
      } else {
        item.replaceWith($(newItem)); // заменяем поле на "чистое"
      }
      fieldsAttached--;

      if (fields == 1) { // если поле осталось одно
        attach.find('.attach__up').text('Загрузить файл'); // меняем текст
      }
    }
  });

  // При нажатии на "Изменить"
  attach.on('click', '.attach__edit', function() {
    $(this).closest('.attach__item').find('.attach__input').trigger('click'); // имитируем клик на инпут
  });

  // При нажатии на "Удалить"
  attach.on('click', '.attach__delete', function() {
    var item = $(this).closest('.' + fieldClass);
    if (fields > fieldsAttached) { // если полей больше, чем загруженных файлов
      item.remove(); // удаляем поле
      fields--;
    } else { // если равно
      item.after($(newItem)); // добавляем новое поле
      item.remove(); // удаляем старое
    }
    fieldsAttached--;
    if (fields == 1) { // если поле осталось одно
      attach.find('.attach__up').text('Загрузить файл'); // меняем текст
    }
  });
});

<style>.attach__head {
  border-bottom: #000 solid 1px;
  text-transform: uppercase;
  font-weight: 700;
  padding: 0 0 5px 0px;
  margin: 0 0 5px 0;
}

.attach__item {
  border-bottom: #ccc solid 1px;
  padding: 0 0 5px 0px;
  margin: 0 0 5px 0;
}

.attach__item:last-of-type {
  margin-bottom: 0px;
  border-bottom: none;
}

.attach__up {
  cursor: pointer;
}

.attach__edit,
.attach__delete {
  display: none;
  margin-right: 10px;
  cursor: pointer;
}

.attach__edit {
  color: #2f7dfe;
}

.attach__delete {
  color: #f00;
}

.attach__item--attached .attach__up {
  display: none;
}

.attach__item--attached .attach__edit,
.attach__item--attached .attach__delete {
  display: inline-block;
}

.attach__input {
  display: none;
}</style>
<form>
  <div class="attach">
    <div class="attach__head">Прикрепите файлы (максимум 10 файлов):</div>
    <div class="attach__item">
      <label>
        <div class="attach__up">Загрузить файл</div>
        <input class="attach__input" type="file" name="files" />
      </label>
      <div class="attach__name"></div>
      <div class="attach__edit">Изменить</div>
      <div class="attach__delete">Удалить</div>
    </div>
  </div>
</form>
Ответить с цитированием
  #2 (permalink)  
Старый 29.09.2017, 13:12
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

LADYX,
Попробуйте в строке 13 вместо
fileName = '';

поставить
fileName = item.find('.attach__name').text();
Ответить с цитированием
  #3 (permalink)  
Старый 29.09.2017, 13:30
Аватар для LADYX
Профессор
Отправить личное сообщение для LADYX Посмотреть профиль Найти все сообщения от LADYX
 
Регистрация: 19.02.2015
Сообщений: 217

Dilettante_Pro,
добрый день!
Если так сделать, то эта ошибка убирается. Но тогда появляется другая - сколько бы файлов не добавлял, на почту приходит только первый добавленный.
Ответить с цитированием
  #4 (permalink)  
Старый 29.09.2017, 14:31
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

LADYX,
Сообщение от LADYX
появляется другая
Появляется или и до этого была?
Каким образом вы передаете информацию по файлам к отправке почты?
Ответить с цитированием
  #5 (permalink)  
Старый 29.09.2017, 14:51
Аватар для LADYX
Профессор
Отправить личное сообщение для LADYX Посмотреть профиль Найти все сообщения от LADYX
 
Регистрация: 19.02.2015
Сообщений: 217

Dilettante_Pro,
в скрипте только одна ошибка - та, которую я указал в своём вопросе. В остальном скрипт работает без ошибок.
Но если мы делаем так:
Сообщение от Dilettante_Pro Посмотреть сообщение
LADYX,
Попробуйте в строке 13 вместо
fileName = '';

поставить
fileName = item.find('.attach__name').text();
то эта ошибка исчезает. Но тогда появляется другая:
Сообщение от LADYX Посмотреть сообщение
сколько бы файлов не добавлял, на почту приходит только первый добавленный.
Ответить с цитированием
  #6 (permalink)  
Старый 29.09.2017, 16:48
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

<input class="attach__input" type="file" name="files" multiple />


multiple Позволяет выбирать и загружать сразу несколько файлов.
Ответить с цитированием
  #7 (permalink)  
Старый 29.09.2017, 17:45
Аватар для LADYX
Профессор
Отправить личное сообщение для LADYX Посмотреть профиль Найти все сообщения от LADYX
 
Регистрация: 19.02.2015
Сообщений: 217

Сообщение от j0hnik Посмотреть сообщение
multiple Позволяет выбирать и загружать сразу несколько файлов.
А multiple здесь причем?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Загрузка файлов на сервер (не хватает вывода ошибки) byFahrenheit Серверные языки и технологии 4 26.10.2016 21:55
Nodejs, busboy, загрузка нескольких файлов, не корректно вызывается событие 'finish' master_alf AJAX и COMET 1 07.10.2014 11:08
передача файлов через ajax ask67 jQuery 4 12.09.2014 12:46
То-ли лыжи не едут, толи... возможно ошибка в коде. AzriMan Общие вопросы Javascript 19 18.05.2009 16:07
IE: неизвестная ошибка выполнения _Kpot_ Internet Explorer 1 03.04.2008 11:00