javascript - 从 IE 中的不同元素调用时，文件输入控件无法正确触发

Question

我试图重新创建 gmail 的文件上传功能——即不使用默认文件输入类型——我隐藏该元素并使用 href 来模拟点击默认控件。

那部分我在所有浏览器中都工作过，但我使用文件控件的 onchange 句柄开始文件上传(将临时表单/发布结果提交到 iframe)。问题是在选择文件后，控件在 IE 中显示为空白，但在 FF 和 Chrome 中工作正常。我只需要支持 IE 8+。

最后一个棘手的问题 - 这发生在现有表单中，因此我使用 jQuery 将表单附加到文档底部。

<a id ="upper">Upload</a>

触发这个 jQuery

$("#upper").click(function() {
  $('#dynamic_files').click();
});

动态添加表单

      $().ready(function() {
            $('body').append('<form id="my_form" name="upload" action="/fil/upload"       
method="POST" enctype="multipart/form-data" target="my_iframe">
<iframe id="my_iframe" name="my_iframe" src="" style="display:block;"></iframe>  
<input type="file" name="files[resource_file]" id="dynamic_files"  
onChange="this.form.submit();" /></form>');
       });

还要注意，在 IE 中，如果我单击默认文件选择器控件而不是我的“快捷方式”链接，则此代码有效

Answer 1

这是 IE 8 的限制。Gmail 使用 flash 绕过文件输入控件。伪造它的一种方法是将控件的不透明度设置为 0 并将其覆盖在按钮上，如本例所示:

http://www.quirksmode.org/dom/inputfile.html

还有许多预构建的解决方案可以让您从中抽象出来。我过去用过的一个是 PLUpload:

http://www.plupload.com/