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控件并初始化刚刚添加的fileupload控件的onchange事件。点击获取按钮fileupload控件时chrome 12中的问题没有打开，但在firefox4和ie8中它正在工作。知道为什么吗？

Answer 1

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

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

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

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

Answer 2

自己做这种代码可能很痛苦。也许看看existing multiple file upload jQuery plugin会有所帮助。

文件上传中的问题

2 个答案: