动态创建的文件输入不绑定到IE上的更改事件

Question

我需要动态创建fileinput元素。

问题：我无法绑定到IE上的更改事件。尝试

.change(function(){});
.bind('click',function(){});
.on('click', function(){});

查看我的Codepen演示：

http://codepen.io/anon/pen/xwmxvp

<a href="#" id="fileInput">Click me</a>
$('#fileInput').click(function(){
      var fileSelector = document.createElement("input");
      fileSelector.setAttribute('type', 'file');
      
      fileSelector.click();
      $(fileSelector).change(function (e) {
        alert("file changed");
      });
})

Answer 1

这似乎是一个IE安全问题。无法触发文件上载按钮单击。用户需要实际点击上传按钮。

当我试图为上传设置浏览按钮的样式时，我遇到了这个问题，最终我使用相对位置和不透明度将输入放在一个样式按钮的顶部：0，所以用户实际上是在点击文件上传输入，而不是按钮。

[type=file]
{
    opacity:0;
    position: relative;
    left: -63px;
    width: 58px;
}

Fiddle herehttp://jsfiddle.net/DSARd/1914/

附言：如果这段代码在IE中适用，问题可能是元素没有添加到dom中。尝试用这个替换您的javascript

$('#fileInput').click(function(){
  var fileSelector = document.createElement("input");
  fileSelector.setAttribute('type', 'file');
  fileSelector.setAttribute('hidden', 'true');
  $("body").append(fileSelector);
  fileSelector.click();
  $(fileSelector).change(function (e) {
    alert("file changed");
  });
})