Dynamically creating file inputs in Internet Explorer

Question

The code below dynamically creates a file input once my custom button is clicked generating a file input with a name of photo[] and an id of photo'x' (x as a variable). The code is working fine with all the browsers except the almighty IE. In IE i can click my custom upload button add a file and when i submit the form, the file input will be cleared. It will submit the form but the file input would be blank. But it works well with other browsers.

is this a bug? or a security thingy? if it is, how can i fix this problem?

var x = 0;
addFile = function(addFileButton) {
    var form = document.getElementById('form');
    var box = document.createElement('input');
    box.type = 'file';
    box.name = 'photo[]';
    box.id = 'photo' + x;
    box.style.cssText = 'position:absolute; top:-200px;';
    box.onchange = function() {
        checkFileDup(this.value, x - 1);
    };
    form.appendChild(box);
    jQuery("#photo" + x).trigger('click');
    x++;
}

Answer 1

It is a issue of IE, input[type=file] created via javascript are not submitable through form.

My solution is to make a bundle of hidden input[type=file] elements in the page and make them visible when required.