Clone a file input element in Javascript

I have a file input element that needs to be cloned after the user has browsed and selected a file to upload. I started by using obj.cloneNode() and everything worked fine, that is until I tried using it in IE.

I've since tried using jQuery's clone method as follows:

var tmp = jQuery('#categoryImageFileInput_'+id).clone();


var clone = tmp[0];

Works as expected in FireFox, but again not in IE.

Guessing that you need this functionality so you can clone the input element and put it into a hidden form which then gets POSTed to a hidden iframe...

IE's element.clone() implementation doesn't carry over the value for input type="file", so you have to go the other way around:

// Clone the "real" input element


var real = $("#categoryImageFileInput_" + id);


var cloned = real.clone(true);


// Put the cloned element directly after the real element


// (the cloned element will take the real input element's place in your UI


// after you move the real element in the next step)


real.hide();


cloned.insertAfter(real);   


// Move the real element to the hidden form - you can then submit it

real.appendTo("#some-hidden-form");