javascript - 文件上传问题

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控件的onchange事件。在 chrome 12 中单击获取按钮文件上传控件时的问题没有打开，但在 firefox4 和 ie8 中它正在工作。知道为什么吗？

Answer 1

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

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

为什么它会这样，我不确定。我第一次遇到这个问题时，我尝试了更长的时间间隔，一直减少它，看看你能把它降到多低，直到我注意到它甚至不需要延迟。显而易见的答案是，当您触发点击时，它实际上还没有在 DOM 中准备好(元素在那里，但是否有合适的事件？)。

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