Empty file input from .clone()

Question

I'm trying to clone a file input form, which every time I select a file then click "add more" to clone the file input, but it has copied the selected file in the input.

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

Demo: jsFiddle.

Now whenever you select a file before cloning the previous, you can see it has the same file selected, I need it to be empty when cloned.

EDIT:

How would I be able to clone this, referring to Neal's answer?

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

Answer 1

what you can try is:

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

UPDATE
or if all the inputs will be copies from the previous just create a new one instead of cloning:

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