从.clone（）输入空文件

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

 Add more 

jQuery的：

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

演示： jsFiddle 。

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

编辑：

我怎么能克隆这个，参考Neal的答案 ？

 
 Add more 

Answer 1

你可以尝试的是：

 $('#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(); $('',{type:cloned.attr('type')}).insertBefore($(this)); }); 

Answer 2

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

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

 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); $('
').append(inputClone)[0].reset(); input.after(inputClone).detach(); 

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

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