使用输入类型=文件上传文件在 IE 中不适用于第一个文件，适用于后续上传

Question

上传功能在 Chrome 中运行良好，但在 IE 11 上无法运行。

我正在尝试通过使用以下 dom 元素来实现上传功能：

<input type="file" id="file-upload" class="hidden-inputs"/>

当用户点击其他东西时，我触发了点击，输入本身是隐藏的。这是它的代码：

$("#file-upload").click();//triggering click

input.change(function(){//when file is selected
    var file = this.files[0];

    api.File.upload(path, file, function(err){//upload to server
         //do something in callback
    });
});

当我尝试调试代码时，添加断点表明它不会进入更改时调用的函数。这只发生在我第一次尝试上传一段时间时，如果我不断尝试上传相同的文件。但是，如果我尝试一次上传文件（不起作用），那么我选择了一个不同的文件，它可以完美地工作。如果我触发上传功能也会发生同样的事情，但不是第一次选择一个项目，而是点击取消，然后我再次尝试上传，这次选择一个文件，它将完美运行。正在触发 on change 事件，所以这不是问题。知道什么可能导致这种行为，只在 IE 中？非常感谢您的帮助！

编辑：另外，如果它有帮助的话。当多次重复上传失败，然后选择在另一个文件上上传时，它将执行您之前尝试的上传次数。

Answer 1

IE 显然不如 Chrome 宽容。我的问题是我在实际更改功能之前触发了点击事件。只需更改顺序即可。首先实施更改，然后触发点击。

Answer 2

出于安全原因，IE 不允许您隐藏type="file" 输入。显然，Chrome 有一种更精细的方法来检测用户是否实际与屏幕交互，而不是事件是否以编程方式触发。在 Opera 和 FF 中也报告了此问题。

您可以使用 css "hack" 解决这个问题：

[注意 - 在 IE10 中测试 - 未测试 $.post() 但我相信它应该仍然有效]

$('input[name=upload]').change(function () {
    var file = this.files[0];
    $('#results').html(file.name);
  
    // do something with the file...
    // api.File.upload(path, file, function(err) {}
  
});


$('#upload-btn').click(function () {
   alert('working');
   $('input[name=upload]').click();
});

.up-overlay {
    display: block;
    width: 100px;
    height: 20px;
    overflow: hidden;
}
.btn-overlay {
    width: 110px;
    height: 30px;
    position: relative;
    top: -5px;
    left: -5px;
}
#upload_input{
    font-size: 50px; 
    width: 120px; opacity: 0; 
    filter:alpha(opacity: 0);  
    position: relative; 
    top: -40px;
    left: -20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="up-overlay" style="">
    <button id="upload-btn" class="btn-overlay" style="">Upload File</button>
    <input type="file" id="upload_input" name="upload" />
</div>

<div id="results"></div>

这并没有解释您帖子中描述的许多行为，我认为这是因为您未在此处发布的代码中存在其他因素。

在 SO（here、here、here 和 primary reference to this posted answer）上有很好的记录，您无法在许多浏览器中触发 hidden 文件输入的更改事件。高温