文件上传中的问题

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();
        });
    });

场景是我必须上传多个文件,一旦用户选择了要上传的文件,我必须向用户显示文件名.然后,在提交表单时,我将上传所有文件.为此,点击获取按钮我正在动态添加一个fileupload控件并初始化刚添加的fileupload控件的onchange事件.点击获取按钮fileupload控件时chrome 12中的问题没有打开,但在firefox4和ie8中它正在工作.知道为什么吗？

Answer 1

要使其在Chrome 12上运行,您只需将其添加到窗口超时为0,如下所示:

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

为什么它的行为如此,我不确定.我第一次遇到这个问题时,我用较长的间隔尝试了它,一直减少它以查看你能得到多少,直到我发现它甚至不需要延迟.显而易见的答案是,当你触发点击时,它实际上并没有在DOM中准备好(元素在那里,但它是适当的事件吗？).

示例:http://jsfiddle.net/HgEga/