Динамическая загрузка файлов type=file

@sashgera · Регистрация: 19.09.2011

Author24 — интернет-сервис помощи студентам

Здравствуйте
Есть инпут type=file
ПОСЛЕ каждой загрузки файла, динамически добавляется еще поле type=file

HTML5
1
<input type="file" class="fil">

JavaScript
1
$('.fil').clone().insertAfter('.fil');

Пожалуйста, помогите сделать условие - если на странице уже есть один и более инпутов с не загруженным файлом, то еще один не добавлять (не клонировать), что-то типа:

JavaScript
1
2
3
if(/*если на странице уже есть инпут с не загруженным файлом, то еще один не клонировать*/){
  $('.fil').clone().insertAfter('.fil');
}

@BANO · 07.07.2016, 21:17

sashgera, а как вы определяете загружен файл или нет?

@sashgera · 07.07.2016, 21:34 **[ТС]**

Сообщение от BANO

sashgera, а как вы определяете загружен файл или нет?

пока никак - для этого и обратился за помощью
может быть так?:

JavaScript
1
$('.fil').value == '';

Добавлено через 6 минут

Сообщение от BANO

sashgera, а как вы определяете загружен файл или нет?

BANO, или вы имеете ввиду когда происходит клнирование type=file? - Запихал в функцию change

JavaScript
1
$('.fil').clone().insertAfter('.fil');

@BANO · 07.07.2016, 22:21

sashgera, пока вы форму не отправите, все эти файлы остаются у пользователя на компе...

@sashgera · 07.07.2016, 22:49 **[ТС]**

BANO, я наверное не правильно сформулировал вопрос и вы меня не совсем поняли
допустим, на странице есть три инпута type=file,
два инпута - с загруженным файлом
один инпут пустой - файл не загружен
нужно
1) узнать, сколько на странице пустых инпутов
2) сделать условие - если один и более инпутов пустые (файл не загружен), то клонирование нового инпута не делать

количество на странице всех инпутов, можно узнать так:

JavaScript
1
var fff = $('.fil').length;

а вот как узнать количество только пустых инпутов..?

@BANO · 07.07.2016, 23:04

sashgera, нет, скорее вы запутались в терминологии
вы наверное под "загруженым" файлом имеете в виду, что у инпута уже есть значение, то есть файл для загрузки выбран
так вот
еси вы имеете в виду именно это, то тогда можно сделать вот такой код

Javascript
1
2
3
$(".fil").filter(function(){
    return !!this.files[0]
}).length

@sashgera · 07.07.2016, 23:15 **[ТС]**

Сообщение от BANO

вы наверное под "загруженым" файлом имеете в виду, что у инпута уже есть значение, то есть файл для загрузки выбран

да, именно это я имел в виду
BANO, только я не понял, что выполняет приведенный вами код? как применить этот код к условию?

@BANO · 07.07.2016, 23:38

Сообщение от sashgera

а вот как узнать количество только пустых инпутов..?

вот такой код узнаёт количество пустых инпутов

JavaScript
1
2
3
$(".fil").filter(function(){
    return !this.files.length
}).length

@sashgera · 08.07.2016, 00:01 **[ТС]**

BANO, а как записать в переменную результат функции и применить переменную в условии. Пожалуйста, если не трудно

@BANO · 08.07.2016, 00:07

JavaScript
1
2
3
4
5
if(!$(".fil").filter(function(){
    return !this.files.length
}).length){
  $('.fil').clone().insertAfter('.fil');
}

@sashgera · 08.07.2016, 00:51 **[ТС]**

BANO, применил ваш код
сейчас на странице два инпута, изначально они пустые, в первый инпут выбираю файл, после выбора файла выполняется клонирование нового инпута, хотя по условию клонироваться не должен т.к. второй инпут пустой

@BANO · 08.07.2016, 01:16

sashgera, а у меня работает
приходится даже его ограничивать, чтобы он слишком много всего не создавал
вот посмотрите

код

JavaScript
1
2
3
4
5
6
7
$(document).change(".fil",function() {
  if (!$(".fil").filter(function() {
      return !this.files.length
    }).length) {
    $('.fil:first').clone().insertAfter('.fil:last');
  }
})

Добавлено через 43 секунды
sashgera, ограничения нужны, чтобы не было возведения в квадрат

@sashgera · 08.07.2016, 01:59 **[ТС]**

BANO, да вижу, у вас все работает, значит что-то не так у меня, буду искать ошибку. Вам большое спасибо!

@Fedor Vlasenko · 08.07.2016, 02:26

клонировать объект нужно чистый
держать его в переменной и затем подставлять.
таким образом делается так-же очистка объекта
и чем не угодил multiple?
ведь можно сразу выбирать несколько файлов

HTML5
1
<input type="file" multiple="multiple" name="files[]" title="Необходимо выбрать минимум один файл" id="files" />

@sashgera 6 / 6 / 5 Регистрация: 19.09.2011 Сообщений: 463
	08.07.2016, 01:59 [ТС]	13
	BANO, да вижу, у вас все работает, значит что-то не так у меня, буду искать ошибку. Вам большое спасибо! 0

Новые блоги и статьи Все статьи Все блоги /
Разбиваем монолит на два микросервиса и реализуем CI/CD ArchitectMsa 20.03.2025 Когда команда растет, а функциональность монолита расширяется, поддерживать и развивать такую систему становится все труднее. Разработчики начинают тратить много времени на разбор сложных. . .	Python и PDF: Создание и редактирование файлов py-thonny 20.03.2025 Работа с PDF-документами – одна из популярных задач в современной разработке. Python предлагает несколько инструментов для создания, чтения и редактирования PDF-файлов, среди которых особенно. . .	Корутины в Unity и производительность WaitForSeconds GameUnited 20.03.2025 Разработчики игр на Unity часто сталкиваются с вопросом: как выполнять действия через определённые промежутки времени, не блокируя основной поток игры? Тут как раз и приходят на помощь корутины —. . .	Криптография в PHP Jason-Webb 20.03.2025 PHP предоставляет много криптографических возможностей: от встроенных функций хеширования до полноценных библиотек шифрования — арсенал средств довольно обширен. Но всё это бесполезно без понимания. . .	Lineedge (Semi-Alpha) 0.75@20: Что мы потеряли Etyuhibosecyu 20.03.2025 С каждым новым стандартом Lineedge обретает новые возможности — это ясно, как божий день. Однако есть и другая сторона — избавление от устаревших и проблемных элементов. Обычно удаление. . .
Реализация перечислений в Go golander 19.03.2025 Если вы перешли на Go с других языков программирования (как я), таких как C#, Java или Python, вы наверняка заметили, что Go не имеет встроенной поддержки перечислений (enumerations). Это может стать. . .	Шаблон API Gateway в микросервисной архитектуре MatrixArchitect 19.03.2025 API Gateway — один из основных компонентов микросервисной архитектуры. Фактически, API Gateway представляет собой сервис, который располагается между клиентскими приложениями и бэкенд-микросервисами,. . .	C++26: Что мы потеряли bytestream 19.03.2025 С каждым новым стандартом C++ обретает новые возможности — это ясно, как божий день. Однако есть и другая сторона — избавление от устаревших и проблемных элементов. Обычно удаление функциональности. . .	Async/await в C#: Асинхронное программирование в действии UnmanagedCoder 19.03.2025 Разработка современных приложений немыслима без понимания асинхронного программирования. Если вы когда-либо создавали приложение, которое взаимодействует с внешними ресурсами — будь то работа с. . .	Сопоставление с образцом (Pattern Matching) в Python: Списки и словари py-thonny 19.03.2025 Программисты любят, когда код говорит сам за себя. Представьте, что вы можете просмотреть структуру данных и мгновенно понять, что с ней делать — без сложных условий и вложенных проверок. Именно эту. . .

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	07.07.2016, 21:17	2
	sashgera, а как вы определяете загружен файл или нет? 0

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	07.07.2016, 22:21	4
	sashgera, пока вы форму не отправите, все эти файлы остаются у пользователя на компе... 0

@sashgera 6 / 6 / 5 Регистрация: 19.09.2011 Сообщений: 463
	07.07.2016, 23:15 [ТС]	7
	Сообщение от BANO вы наверное под "загруженым" файлом имеете в виду, что у инпута уже есть значение, то есть файл для загрузки выбран да, именно это я имел в виду BANO, только я не понял, что выполняет приведенный вами код? как применить этот код к условию? 0

@sashgera 6 / 6 / 5 Регистрация: 19.09.2011 Сообщений: 463
	08.07.2016, 00:01 [ТС]	9
	BANO, а как записать в переменную результат функции и применить переменную в условии. Пожалуйста, если не трудно 0

@sashgera 6 / 6 / 5 Регистрация: 19.09.2011 Сообщений: 463
	08.07.2016, 00:51 [ТС]	11
	BANO, применил ваш код сейчас на странице два инпута, изначально они пустые, в первый инпут выбираю файл, после выбора файла выполняется клонирование нового инпута, хотя по условию клонироваться не должен т.к. второй инпут пустой 0