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

Question

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

  <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, я добавляю элемент управления fileupload динамически и инициализирую событие onchange только что добавленного элемента управления fileupload.Проблема в chrome 12 при нажатии кнопки get - управление загрузкой файла не открывается, а в firefox4 и ie8 - работает.Есть идеи почему?

Answer 1

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

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

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

пример: http://jsfiddle.net/HgEga/

Answer 2

Создание такого кода самостоятельно может быть болезненным. Может быть, поможет существующий плагин для загрузки нескольких файлов .