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
    });
});

当我尝试调试代码时，添加断点表明它不会进入更改时调用的函数。这只发生在我上传一段时间的第一次尝试，如果我不断尝试上传SAME文件。但是，如果我尝试上传文件一次（不起作用），那么我选择一个差异文件，它完美无缺。如果我触发上传功能会发生同样的事情，但是第一次没有选择项目，我点击取消，然后我再次尝试上传，这次选择一个文件，它将完美地工作。 on change事件被触发，所以这不是问题。任何想法可能导致这种行为，只在IE？我很感激你的帮助！

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

Answer 1

IE显然不像Chrome那么宽容。我的问题是我在实际更改功能之前触发了click事件。只需改变订单即可。首先实现更改，然后触发单击。

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的更改事件在许多浏览器中输入文件。 HTH

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

2 个答案: