Ввод пустого файла из .clone () - PullRequest
Новая
       21

Ввод пустого файла из .clone ()

3 голосов
/ 08 апреля 2011

Я пытаюсь клонировать форму ввода файла, которая каждый раз, когда я выбираю файл , затем , нажимает «добавить еще», чтобы клонировать ввод файла, но он скопировал выбранный файл во ввод.

<input type="file" />
<span id="add-more-files">Add more</span>

jQuery: 

$('#add-more-files').click(function()
{
   var cloned = $(this).prev().clone();
   $(cloned).insertBefore($(this));
});

Демо: jsFiddle .

Теперь, когда вы выбираете файл перед клонированием предыдущего, вы можете видетьу него выбран тот же файл, он должен быть пустым при клонировании.

РЕДАКТИРОВАТЬ:

Как я смогу клонировать это, ссылаясь на Нил ответ ? 

<div class="wrap"><input type="file /></div>
<span id="add-more-files">Add more</span>

Ответы [ 3 ]

1 голос
/ 30 августа 2012

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

Он также работает без кнопки «добавить больше», вместо этого он добавляет поле ввода нового файла при заполнении последнего. 

<div id="files">
    <input type="file" name="files" style="display: none;">
</div>

function AddUploadElement()
{
    var newUploadElement = $("#files").children(":first-child").clone();
    newUploadElement.css("display", "");

    $("#files").append(newUploadElement);
}

$(document).ready(function ()
{
    AddUploadElement();

    $("#files").on("change", "input", function ()
    {
        if ($(this).is(":last-child") == true)
        {
            AddUploadElement();
        }
    });
});

Клонирование важно, поскольку поле ввода шаблона может иметь дополнительные атрибуты.

1 голос
/ 08 апреля 2011

что вы можете попробовать это: 

$('#add-more-files').click(function()
{
   var cloned = $(this).prev().clone();
   cloned.val(null);
   $(cloned).insertBefore($(this));
});

UPDATE
или если все входные данные будут копиями с предыдущего, просто создайте новый вместо клонирования: 

$('#add-more-files').click(function()
{
   var cloned = $(this).prev();
   $('<input>',{type:cloned.attr('type')}).insertBefore($(this));
});
0 голосов
/ 12 апреля 2013

Плагин jquery.fileupload позволяет обойти проблему очистки входных файлов, например: 

var inputClone = input.clone(true);
$('<form></form>').append(inputClone)[0].reset();
input.after(inputClone).detach();

, т. Е. Клонировать вход, добавить временную форму для его сброса и отсоединитьввод, чтобы его можно было последовательно добавлять к формам.

, затем вы можете input.replaceWith(inputClone);

...