Chrome文件上传错误:更改事件不会使用同一文件执行两次

lau*_*kok 24 jquery html5 google-chrome file-upload onchange

我正在处理这个html5文件上传器插件,但它有一个谷歌Chrome的错误,我无法理解和解决它.它适用于Firefox.

jsfiddle链接

问题是您无法从桌面上载两次相同的文件.

当您第一次单击,选择,然后单击确定以从桌面上载文件时,它应该警告消息,例如'.button-1' - 取决于您单击的上载按钮.

然后,如果您再次尝试上传相同的文件,则不再执行此行代码,

$(".upload-file",object_parent).change(function() {

             ...
             ...

             alert($cm.selector);

});
Run Code Online (Sandbox Code Playgroud)

知道这个插件出了什么问题吗?

(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);
Run Code Online (Sandbox Code Playgroud)

它在Chrome上工作正常,但最近才失败,可能是Chrome已将最新版本更新到我的机器,此更新导致错误?

小智 47

如果要上传两次,请清除文件输入值

$('input[type="file"]').val(null);
Run Code Online (Sandbox Code Playgroud)

jsfiddle测试


小智 17

是.我的Chrome与Firefox有不同的行为,但我认为Chrome是正确的.

根据W3C的文件:

当控件失去输入焦点并且自获得焦点后其值已被修改时,会发生onchange事件

如果您尝试上载相同的文件,文件输入的值不会更改.尝试将其打印出来:

$('.button-2').click(function(){
    console.log($(".list .upload-file").val())
    return false;
});
Run Code Online (Sandbox Code Playgroud)