Clone input element and add to hidden form using jQuery

If a file input element is placed in a form and you would like to upload it using a hidden form, the first thought would be


var file_elem = jQuery('#fileElem');
var cloned = file_elem.clone();

var hdn_frm = jQuery('#frm');
hdn_frm.append(cloned);

hdn_frm.submit();


This would work in firefox. But it would not work in IE.

Editing the file form field is a security risk and thus is disabled on most browsers.

A workaround would be:


var file_elem = jQuery('#fileElem');
var cloned = file_elem.clone();
cloned.id = 'fileElem1';
var hdn_frm = jQuery('#frm');

// 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)
cloned.insertAfter(file_elem);
file_elem.hide();

file_elem.appendTo(hdn_frm);
hnd_frm.submit();


If you are using ajaxSubmit for form, in case error message is returned or if you stay on the form, the user could change the file being uploaded. Since the current element being seen is the cloned one, the desired result would not be achieved.

For this, after the form submit, reset the file elements.


var file_elem = jQuery('#fileElem');
var cloned = jQuery('#fileElem');

file_elem.insertBefore(cloned);
file_elem.show();
cloned.remove();