Chrome文件上传错误：更改事件不会被同一个文件执行两次 [英] Chrome file upload bug: on change event won't be executed twice with the same file

问题描述

我正在使用这个html5文件上传器插件，但它在 Google Chrome 上存在一个我无法理解和修复的错误。它在Firefox上正常工作。

jsfiddle链接

问题是，您不能两次从您的桌面上传两次相同的文件。 点击，选择，然后点击确定从桌面上传一个文件，它会提示一个消息，比如'.button-1' - 取决于你点击了哪个上传按钮。

然后，如果您尝试再次上传相同的文件，这行代码将不会再执行，

 （code $）$（。upload-file，object_parent）.change（function（）{
 
 ... 
 ... 
 
 alert（$ cm.selector）; 
 
}）; 
  

任何想法这个插件出了什么问题？

 （function（$）{
 
 //将这个新方法附加到jQuery 
 $ .fn.extend（{
 
 //这是你写插件名称的地方
 upload_file_html5：function（options）{
 
 //设置默认值，用逗号分隔这些设置，例如：
 var defaults = {
 objectSuperparent：'.media'
} 
 
 var options = $ .extend（defaults，options）; 
 var o = options; 
 
 var $ cm = this.click（函数（e）{
 
 //< a>按钮是这种情况下的对象
 var object = $（this）; 
 
 //获取元素的其他信息属于这个对象组
 var object_href = object.attr（'href'）; 
 var object_parent = object.parent（ ）; 
 alert（$ cm.selector）; 
 
 //触发元素上的click事件。 
 //由于安全策略触发，在某些浏览器中不允许/支持输入type = file，Opera是其中之一。 
 //$('input[type=file]').trigger('click'）; //或：
 $（。upload-file，object_parent）.click（）; 
 
返回false; 
 
}）; 
 
 //当用户更改文件时触发ajax帖子。 
 var $ cm_2 = $（。upload-file）。change（function（）{
 
 //< input>是这种情况下的对象
 var object = $（this）; 
 
 var object_form = object.parent（）; 
 var object_superparent = object.parents（o.objectSuperparent）; 
 var path_config = $（$ cm.selector，object_superparent）.attr（'href'）; 
 var path_post = object_form.attr（'action'）; 
 
 alert（$ cm.selector）; 
 // alert（path_config）; 
 
 .... 
 .... 
 
}）; 
 
} 
}）; 
 
））（jQuery）;它在Chrome上正常工作，但最近刚刚失败，可能Chrome已经将最新版本更新到了我的机器上并且这个更新导致了bug？
解决方案
是的。我的Chrome与Firefox有不同的行为，但是我认为Chrome是正确的。 
 
 
根据 W3C的文档：
 $ b 
 
 
 onchange事件发生时一个控件失去了输入焦点，并且它的值已经被修改，因为获得焦点如果你尝试上传同一个文件，文件输入不会改变。尝试打印出来：
 
 
  $（'。button-2'）。click（function（）{
 console.log（$（.list .upload-file）.val（））
 return false; 
}）; 
  
 
I am working on this html5 file uploader plugin but it has a bug on Google Chrome which I can't understand and fix it. It works fine on Firefox. 

jsfiddle link

The problem is that you cannot upload the same file twice from your desktop.

When you first click, select, and hit OK to upload a file from your desktop, it should alert a message, for instance '.button-1' - depends on which upload button you click.

Then if you try to upload the same file again, this line of code won't be executed anymore,
$(".upload-file",object_parent).change(function() {

             ...
             ...

             alert($cm.selector);

});
Any idea what goes wrong in this plugin?
(function($){

    // Attach this new method to jQuery
    $.fn.extend({ 

        // This is where you write your plugin's name
        upload_file_html5: function(options) {

            // Set the default values, use comma to separate the settings, example:
            var defaults = {
                objectSuperparent:    '.media'
            }

            var options =  $.extend(defaults, options);
            var o = options;

            var $cm = this.click(function(e){

                // <a> button is the object in this case.
                var object = $(this);

                // Get other info from the element belong to this object group.
                var object_href = object.attr('href');
                var object_parent = object.parent();
                alert($cm.selector);

                // Trigger the click event on the element.
                // Due to security policies triggering click on the input type=file is not allowed/supported in some browsers and Opera is one of them.
                //$('input[type=file]').trigger('click'); // or:
                $(".upload-file",object_parent).click();

                return false;

            });

            // Trigger ajax post when ever the file is changed by the user.
            var $cm_2 = $(".upload-file").change(function(){

                // <input> is the object in this case.
                var object = $(this);

                var object_form = object.parent();
                var object_superparent = object.parents(o.objectSuperparent);
                var path_config = $($cm.selector,object_superparent).attr('href');
                var path_post = object_form.attr('action');

                alert($cm.selector);
                //alert(path_config);

                ....
                ....

            });

        }
    });

})(jQuery);
It was working OK on Chrome but just failed recently, probably Chrome has updated a latest version to my machine and this update causes the bug?
解决方案
Yes. My Chrome has different behavior to Firefox, but I think Chrome is correct.

According to W3C's document:

  
onchange event occurs when a control loses the input focus and its value has been modified since gaining focus
if you try to upload the same file, the value of file input does not change. Try to print it out:
$('.button-2').click(function(){
    console.log($(".list .upload-file").val())
    return false;
});


                        
这篇关于Chrome文件上传错误：更改事件不会被同一个文件执行两次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！