带有jquery的文件输入和IE8？答案

【问题标题】：Fileinput and IE8 with jquery?带有jquery的文件输入和IE8？
【发布时间】：2011-04-08 01:58:44
【问题描述】：

嗨，

我有几个像这样的输入类型文件元素：

<input type="file" name="files" id="file0">
<input type="file" name="files" id="file1">
<input type="file" name="files" id="file2">
...

这个元素被绑定到jquery的改变事件，像这样：

$('input[type=file]').change(FileChangeHandler);

FileChangeHandler 看起来像这样（这并不重要，但我以其他方式发布）：

function FileChangeHandler() {

            if($(this).val().length > 0){
                UpdateFileInputs();
            }
        }

        function UpdateFileInputs()
        {
            var hiddenClass = 'fileHidden';
            var visibleClass = 'fileVisible';
            var emptyAndVisibleFound = false;

            if(!FileThresholdReached())
            {
                for(var i = 0; i < 10; i++){
                    if($('#fileInput' + i).hasClass(visibleClass)){
                        if($('#file' + i).val().length < 1){ 
                            if(!emptyAndVisibleFound){
                                emptyAndVisibleFound = true;}
                            else{
                                $('#fileInput' + i).attr('class' , hiddenClass);}
                        }
                    }
                    else{
                        if(!emptyAndVisibleFound){
                            $('#fileInput' + i).attr('class' , visibleClass);
                            emptyAndVisibleFound = true;
                        }
                        else{
                            $('#fileInput' + i).attr('class' , hiddenClass);}
                    }
                }
            }
        }

问题：问题在于，在 IE8 中，当输入文件元素失去焦点时（不是在文件浏览器之前或之后），更改似乎首先被触发。在Firefox中，文件浏览器关闭后直接进行更改？在这种情况下，我更喜欢 firefox 的方式。

我该如何解决这个问题？

致以最诚挚的问候

注意：我尝试创建一个 jsfiddle.net 示例，但这并没有显示问题：http://jsfiddle.net/snowman/NCQ5J/

更新：我现在已经设法得到一个工作示例，请看这里：http://www.test.figurspel.net/

【问题讨论】：

对我来说似乎工作正常——当你尝试做一些简单的事情时会发生什么 $('input:file').change(function(){ alert(); }); ?
@Richard > 如果我将更改事件切换到您的示例，那么当点击浏览按钮时，FF 中绝对不会发生任何事情。在 IE 中会发生以下情况：点击浏览按钮，在文件浏览器中选择文件，点击打开，直到文件输入失去焦点，什么都不会发生。如果我关注另一个输入，警报将运行，如果我关注 IE8 中的迷你搜索栏，IE8 将冻结（加载）（几乎总是）。我如何提供更多信息来解决这个问题？

标签： jquery html firefox internet-explorer-8

【解决方案1】：

根据jQuery documentation，

change 事件在元素值改变时发送到元素。 ... 对于选择框、复选框和单选按钮，当用户使用鼠标进行选择时会立即触发该事件，但对于其他元素类型，该事件会延迟到元素失去焦点。

因此，当您的文件输入字段失去焦点时，IE 触发更改事件的行为似乎是正确的。 Firefox 可能会自动移除文件输入字段的焦点，从而触发事件；如果是这种情况，我们需要设计一种方式，让 IE 在选择文件时也可以模糊（或显式调用您的更改处理程序）。

这对规避您的问题并没有太大帮助，但我不知道如何按原样执行此操作（即在文件选择框关闭时回调？）。一旦我发现一些东西，我一定会更新这个。

【讨论】：

是的，这似乎是问题所在，奇怪的是我无法在 jsfiddle 中重新创建它。我正在发布一个示例，但是让它在服务器上运行存在一些问题，我会在它运行后立即返回一个链接。
Neil Ilagan > 请查看更新，我已经设法获得了该问题的在线示例。

【解决方案2】：

这是 jquery 1.4.1 的一个 bug，当切换到 1.4.4 时问题解决了。

【讨论】：