使用输入类型=文件的文件上传在 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
    });
});

当我尝试调试代码时，添加断点表明它不会进入更改时调用的函数。这只会发生在我第一次尝试上传时，如果我一遍又一遍地尝试上传相同的文件。但是，如果我尝试上传一个文件一次（不起作用），那么我 select 一个不同的文件，它工作得很好。如果我触发上传功能，也会发生同样的事情，但我没有第一次 select 上传一个项目，而是点击取消，然后我再次尝试上传，这次 select 一个文件，它会起作用完美。 on change 事件被触发，所以这不是 issue.Any 可能导致此行为的想法，仅在 IE 中？非常感谢您的帮助！

编辑：另外，以防万一。当多次重复失败的上传，然后 select 上传另一个文件时，它将按照您之前尝试的次数执行上传。

Answer 1

出于安全原因，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>

这并不能解释您 post 中所描述的许多行为，我认为这是因为代码中还有您未在此处 post 编辑的其他因素在起作用。

在 SO (here, here, here, and the primary reference to this posted answer) 上有很好的记录，您无法在许多浏览器中触发 hidden 文件输入的更改事件。 HTH

Answer 2

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

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

File upload using input type=file not working in IE for first file, works on subsequent uploads

html

javascript

upload

jquery

internet-explorer