Проблема при загрузке файла

У меня есть следующая разметка:

  <select multiple="multiple" id="targetFilesList"  style="width:200px;height:110px;">
   </select>
   <input type="button" value="Get" id="btnGet" />

и следующий javascript:

    $(function()
    {
        $('#btnGet').click(function()
        {
            var fileupload = $("<input type='file' name='filetoupload' style='visibility:hidden;'/>");
            $('body').append(fileupload);

            fileupload[0].onchange = function()
            {
                $('#targetFilesList').append('<option >' + fileupload.val() + '</option>');
                return false;
            }
            fileupload.click();
        });
    });

Сценарий заключается в том, что мне нужно загрузить несколько файлов, и как только пользователь выбрал файл для загрузки, я должен показать имя файла пользователю. Затем, отправив форму, я выгружу все файлы. Для этого при нажатии кнопка get Я добавляю управление файловой загрузкой динамически и инициализировать событие onchange только что добавленного элемента управления файловой загрузкой. Проблема в chrome 12 при нажатии кнопки getupupupload control не открывается, но в firefox4 и ie8 она работает. Любая идея почему?

Ответы

Ответ 1

Чтобы заставить его работать с Chrome 12, вы можете просто добавить его в тайм-аут окна 0, например:

window.setTimeout(function(){
   fileupload.click();   
},0);

Почему именно так ведет себя, я не уверен. В первый раз, когда я столкнулся с проблемой, я попробовал ее с большим интервалом, все время уменьшая ее, чтобы понять, насколько вы можете ее получить, пока я не заметил, что даже не требуется задержка. Очевидным ответом было бы то, что он на самом деле не готов в DOM к моменту запуска щелчка (элемент есть, но для него есть соответствующие события?).

example: http://jsfiddle.net/HgEga/