Как с помощью jQuery при клике на ссылке создать копию блока?

Question

[Мари Арти]

у меня есть div с инпутом, который позволяет загрузить файл.
ниже идет ссылка. при клике на ссылку должен дублироваться (или создаваться с нуля?) новый блок с классом load-file, но при этом инпут внутри каждого последующего нового блока должен быть уникальным (например чтобы name был file1, file2 и тд)
новые блоки должны создаваться друг под другом (то есть не под ссылкой)

<div class="load-file">
<label>Загрузить файл <input type="file" name="file1"/></label>
</div>

<a href="#" class="load-more">Загрузить еще файл</a>

подскажите, пожалуйста, как это реализовать с помощью jquery?

Answer 1

[mib]

Можно обойтись без ссылки "загрузить еще"
Во-первых использовать

<input type="file" name="file_arr[]"/>
 - это позволит не заморачиваться генерацией имен файлов - будет массив из загружаемых файлов

Eще - хтмл5 позволяет использовать

<input type="file" name="file_arr[]" multiple /> 
- можно выбрать сразу несколько файлов через шифт, или через контрол

если хтмл5 вариант не устраивает - можно сделать так:

prepare_event();

function prepare_event()
{
	$('input[type="file"]').unbind();
	$('input[type="file"]').change(function()
	{
		 //здесь клонирование тега
		//<label>Загрузить файл <input type="file" name="file_arr[]"/></label>
		//но после этого нужно сделать 
		prepare_event(); 
		//чтобы новый инпут тоже перехватывался
		//это не готовое решение, а скорее велосипед, но вполне работоспособный
	});
}

Comments

[Мари Арти]

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

[mib]

Сложность в том, что если нужно добавлять компоненты "на лету" - нужно иметь возможность и удалять их. Ну тоесть рядом с каждым новым элементом ставить ссылочку с крестиком и перехватывать клики по ним, считать какой номер крестика и удалять N'th элемент

Answer 2

[Aleksandr]

Можно так
jsfiddle.net/v2c7kbvy

Comments

[Мари Арти]

точно, спасибо. были попытки сделать с помощью append, но Ваш пример идеален )

Answer 3

[xmoonlight]

.clone()