Question

我正在尝试克隆文件输入表单，每次我选择一个文件然后点击“添加更多”来克隆文件输入，但它已经在输入中复制了所选文件

<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。

现在，无论何时在克隆前一个文件之前选择文件，您都可以看到它已选择相同的文件，克隆时我需要它为空。

修改

我如何能够克隆这个，参考Neal's answer？

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

Answer 1

你可以尝试的是：

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

<强>更新
或者如果所有输入都是以前的副本，只需创建一个新的而不是克隆：

$('#add-more-files').click(function()
{
   var cloned = $(this).prev();
   $('<input>',{type:cloned.attr('type')}).insertBefore($(this));
});

Answer 2

我发现唯一可行的解决方案是将文件输入字段作为隐藏的模板提供。然后在加载页面后创建克隆以提供第一个字段。

它也可以在没有“添加更多”按钮的情况下工作，而是在填写最后一个时添加新的文件输入字段。

<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();
        }
    });
});

克隆部分很重要，因为模板输入字段可能有其他属性。

Answer 3

jquery.fileupload插件可以解决清除文件输入的问题，如下所示：

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

即。克隆输入，附加到临时表单以重置它，并分离输入，以便它可以连续附加到表单。

然后你可以input.replaceWith(inputClone);

从.clone（）输入空文件

3 个答案: